Use the cell-style table attribute to achieve. This is how this attribute is expressed on the official website.
Bind this attribute with v-bind in el-table. (The shorthand for v-bind is: )
<el-table
:data="options"
:cell-style="cell"
>
<el-table-column prop="id" label="id" width="50px"></el-table-column>
<el-table-column prop="label" label="时间" width="200px"></el-table-column>
</el-table>The options data in data is:
data() {
return {
options: [
{ id: 1, label: "inner" },
{ id: 2, label: "webapi" },
{ id: 3, label: "inner-cron" }
],
};
},At this point the page is displayed as:
Declare the cellStyle method in methods. Let's print out each parameter to see what it represents.
cell({ row, column, rowIndex, columnIndex }) {
console.log(row);
console.log(column);
console.log(rowIndex);
console.log(columnIndex);
},The console prints the following:
In fact, it is easy to understand that row is a row, and the first line printed on the console is the first object in the array. column is a column, which is el-table-column. rowIndex is the row index and columnIndex is the column index.
If we want to change the font color of the first line to be green. It can be written like this:
cell({ row, column, rowIndex, columnIndex }) {
if(rowIndex === 0){
return "color:green"
}
},The page effect is:
If you want the background color of the first column to be red. So:
cell({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0){
return "background-color : red"
}
if(rowIndex === 0){
return "color:green"
}
},The page appears as:
If you want the font of the label to be inner-cron to be bold. So:
cell({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return "background-color : red";
}
if (rowIndex === 0) {
return "color:green";
}
if (row.label === "inner-cron") {
return "font-weight : bold";
}
},The page appears as:
