Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how ElementPlus modifies table rows and cell styles". In daily operation, I believe many people have doubts about how to modify table rows and cell styles in ElementPlus. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how ElementPlus modifies table rows and cell styles". Next, please follow the editor to study!

Let's start with the basic configuration. (Vue3)

Const tableData = [{name: "clz", age: 21, job: "Coder",}, {name: "czh", age: 21, job: "Coder",}, {name: "Red Blue Violet", age: 21, job: "Coder",},]

Set the style of a row

It is mainly achieved through the row-style attribute. It is the callback method of the style of a row, which you can use to style a row.

Let's first experience what its parameters are.

Const rowState = (arg) = > {console.log (arg)}

It can be found that it is an object, one attribute is the data of the row, and the other is the line number (starting from 0). As for the reason why it is printed not only 3 times, but 9 times, the later cells will print 18 times, and 9 cells will print 18 times. But this is not the focus of this study.

So, how can we set the style?

You only need to return the object that contains the property style. (hump nomenclature)

Const rowState = (arg) = > {return {backgroundColor: 'pink', color:' # fff'}}

Then, when used with parameters, you can style rows according to the contents of the table.

Const rowState = ({row}) = > {let style = {} switch (row.name) {case 'clz': style = {backgroundColor:' red'} break; case 'czh': style = {backgroundColor:' blue'} break; case 'Red Blue': style = {backgroundColor: 'purple'} break;} return style;}

Set the style of a cell

This is done through the cell-style attribute. The practice is the same as above, not to mention the four main parameters row, column, rowIndex, columnIndex.

Row: information for the line

Column: information for column

RowIndex: number of rows (starting with 0)

ColumnIndex: number of columns (starting with 0)

Const cellStyle = ({row, column, rowIndex, columnIndex}) = > {if (rowIndex = 1 & & columnIndex = 1) {return {backgroundColor: 'pink'}

In fact, cell-state can not only style cells, because its parameters contain row and column, so it can also be used to style a row or column.

Const cellStyle = ({row, column, rowIndex, columnIndex}) = > {if (column.label = 'work') {return {backgroundColor: 'purple'}} if (row.name =' red blue') {return {backgroundColor: 'red'}

Note that where there is an overlap, later styles do not cover the previous ones, but on a first-come-first-served basis.

Header style modification (giveaway)

Special meter head, special treatment

Header-row-style: there is only one rowIndex attribute

Const headerRowStyle = (args) = > {console.log (args) return {height: '100pxrabbit, backgroundColor:' red'}}

It is found that only the row height of the header has changed. Why?

Check the style and find that this is because the cell itself has a background color, so it does not take effect.

Header-row-style: like normal cells, there are four properties

Const headerCellStyle = ({row, column, rowIndex, columnIndex}) = > {if (columnIndex = 1) {return {backgroundColor: 'pink'}

You can also style qualified header cells through the column property.

Const headerCellStyle = ({row, column, rowIndex, columnIndex}) = > {if (column.label = 'name') {return {backgroundColor: 'red'}

At this point, the study on "how to modify table rows and cell styles by ElementPlus" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.