el-table怎么添加逻辑判断
时间: 2023-05-11 12:06:36 浏览: 128
vue修改Element的el-table样式的4种方法
要在 el-table 中添加逻辑判断,可以使用 slot-scope 和 render 函数来实现。具体步骤如下:
1. 在 el-table 中添加一个 column,设置其 prop 属性为自定义的字段名,如 "customColumn"。
2. 在 el-table-column 中使用 slot-scope 属性,将当前行的数据传递给 render 函数。
3. 在 render 函数中,根据当前行的数据进行逻辑判断,返回不同的内容。
示例代码如下:
```
<el-table :data="tableData">
<el-table-column prop="customColumn" label="自定义列" :render-header="renderHeader" :render-cell="renderCell"></el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
renderHeader(h, { column }) {
return h('span', column.label)
},
renderCell(h, { row }) {
if (row.age < 20) {
return h('span', '未成年')
} else {
return h('span', '成年人')
}
}
}
}
</script>
```
在上面的示例代码中,我们添加了一个自定义列 "customColumn",并在 el-table-column 中使用了 slot-scope 属性,将当前行的数据传递给 render 函数。在 render 函数中,我们根据当前行的年龄进行逻辑判断,如果小于 20 岁,则返回 "未成年",否则返回 "成年人"。
阅读全文