方法一
<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'
}
},
html
<!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: {
//方法2
classmeth({
row,
column,
rowIndex,
columnIndex
}) {
// console.log(row, column, rowIndex, columnIndex)
if (row.color === 1 && columnIndex == 1) {
return 'red'
}
},
},
})
</script>
</body>
</html>