目錄
修改表頭以及一整列數(shù)據(jù)的背景顏色，效果如下：
總結(jié)
修改表頭以及一整列數(shù)據(jù)的背景顏色，效果如下：
修改表頭背景顏色：在el-table綁定header-cell-style
修改一整列的數(shù)據(jù)背景顏色：在el-table綁定:cell-style="columnStyle"
完整代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-738242.html
<template>
<el-table :data="tableData" style="width: 100%" stripe :cell-style="columnStyle" :header-cell-style="rowClass">
<el-table-column prop="createByName" label="創(chuàng)建者"></el-table-column>
<el-table-column prop="createTime" label="創(chuàng)建時間"></el-table-column>
<el-table-column prop="message" label="操作記錄名稱"></el-table-column>
<el-table-column prop="oldData" label="原內(nèi)容"></el-table-column>
<el-table-column prop="newData" label="修改內(nèi)容"></el-table-column>
<el-table-column label="操作狀態(tài)">
<template slot-scope="scope">
<span>{{ scope.row.status == 0 ? '正常' : '接口出現(xiàn)異常' }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
columnStyle({ row, column, rowIndex, columnIndex }) {
// 第一列的背景色
if (columnIndex === 3) {
return 'background:#ccff99'
}
},
// 修改表頭顏色
rowClass({ rowIndex, columnIndex }) {
if (rowIndex === 0) {
if (columnIndex === 3) {
// return { background: '#ff9933', color: 'white' }
return { background: '#ccff99' }
}
}
}
}
}
</script>總結(jié)
記錄來源于需求，希望能幫助到你~文章來源地址http://www.zghlxwxcb.cn/news/detail-738242.html
到了這里，關(guān)于vue el-table-column 修改一整列的背景顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
