elementUI修改单元格、行背景色,
程序员文章站
2022-06-08 14:58:20
...
修改单元格背景色cell-style
,修改行背景色row-style
<template>
<el-table
:data="tableData"
:cell-style="TableCellStyle"
:row-style="TableRowStyle"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
// 改变单元格背景颜色
TableCellStyle({row, column, rowIndex, columnIndex}) {
if (columnInex === 3) {
return 'background-color: '#ccc''
//第二种
return 'cell-grey'
}
},
// 改变行背景颜色
TableRowStyle({row, rowIndex}) {
if (rowIndex === 2) {
return 'background-color: rgba(255,0,0,0.4)'
//第二种
return 'cell-grey'
}
}
}
}
</script>
<style>
.cell-grey{
background: #f2f2f2;
}
</style>
推荐阅读
-
php导出excel图片格式,PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽...
-
elementUI table 修改表格背景色,去除单元格底部横线
-
elementui修改单元格的样式
-
elementui中 table表格根据不同的值设置单元格背景色
-
Java修改JTable单元格背景色
-
elementUI修改单元格、行背景色,
-
elementUI table表格点击某一行选中并且改变背景色
-
elementUI table 修改表格背景色,去除单元格底部横线
-
vue+elementui table表格点击单元格单元格改变背景色
-
修改elementUI组件库的单元格高度