element-ui中el-table一般都是通过attribute设置内容及样式,想要单独对其中一个单元格(其实也就是一列单元格)进行操作,可以借助自定义插槽实现
原来的代码
<el-table :data="user">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="old"></el-table-column>
</el-table>
<script>
data(){
return(){
user:[{
name:"小红",
old:"18"
}]
}
</script>
更改过后:
<el-table :data="user">
<el-table-column label="姓名" prop="name">
<template v-slot="row" class="tablestyle">
<div>{{row.name}}</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="old"></el-table-column>
</el-table>
<script>
data(){
return(){
user:[{
name:"小红",
old:"18"
}]
}
</script>
<style>
.tablestyle{
color:blue;
}
</style>