当前位置：首页 > news >正文

elementui 单元格添加样式的两种方法

news 2025/7/12 7:41:58

方法一

<el-table-column fixed prop="name" label="姓名" width="120">
<<template scope="scope">
<span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span>
</template>
</el-table-column>

方法二

el-table标签上添加:cell-class-name="classmeth"。

<el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth">

classmeth({
row,
column,
rowIndex,
columnIndex
}) {

// console.log(row, column, rowIndex, columnIndex)
if (row.color === 1 && columnIndex == 1) {
return 'red'
}
},

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><!-- <script src="/utility/lzmain.js"></script><script src="/utility/lzmain-form.js"></script> --><!-- 引入ele --><link rel="stylesheet" href="../js/vue/index.css"><style>/*滚动条的宽度划过时变大*//*#region************浏览器默认滚动条通用google滚动条*/::-webkit-scrollbar {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.01);}::-webkit-scrollbar-track {-webkit-box-shadow: none;border-radius: 10px;background-color: rgba(0, 0, 0, 0);}::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(0, 0, 0, 0.05);}*::-webkit-scrollbar:hover {transition: all 0.25s ease 0s, width 0.1s ease 0.15s, height 0.1s ease 0.15s;}*:focus::-webkit-scrollbar-thumb,*:hover::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.25);-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);}/* 表头样式 */.has-gutter .cell {font-weight: 600;}.el-table th.el-table__cell>.cell {color: #555;}/* 字体颜色 */.yell {color: yellow;}.green {color: green;}.red {color: red;}</style><body><div id="data"><div class="table-div"><el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column fixed prop="name" label="姓名" width="120"><!--  方法一--><!-- <template scope="scope"><span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span></template> --></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column></el-table></div><div class="model-div  el-popover">111</div></div><script src="../js/vue/vue.js"></script><!-- 放在最下面 --><script src="../js/vue/ele-index.js"></script><script>new Vue({el: '#data',data() {return {tableData3: [{color: 1,date: '2016-05-03',name: '王小虎1',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,}, {color: 1,date: '2016-05-02',name: '王小虎3',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 3,date: '2016-05-04',name: '王小虎4',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 1,date: '2016-05-01',name: '王小虎5',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 3,date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 2,date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 2,date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},methods: {//方法2classmeth({row,column,rowIndex,columnIndex}) {// console.log(row, column, rowIndex, columnIndex)if (row.color === 1 && columnIndex == 1) {return 'red'}},},})</script></body></html>

查看全文

http://www.lryc.cn/news/442890.html