JSX 实现 Element-ui 表格列动态渲染
Cleaner 2024/3/7 Vue
使用 JSX、render 自定义表格组件。
提供两种实现方式：一种使用 scopedSlots 插槽实现，一种使用表格列 formatter 函数实现。
- scopedSlots 插槽实现。
// 定义
const slotScope = {
scopedSlots: {
default(scope) {
return <el-input v-model={scope.row[scheme.__vModel__]}></el-input>
},
},
};
// 使用
<el-table-column label={config.label} align='center' {...slotScope}>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- formatter 函数实现。
// 定义
const formatter = (row, column, cellValue, index) => {
return <el-input v-model={row[scheme.__vModel__]}></el-input>
}
// 使用
<el-table-column label={config.label} align='center' formatter={formatter}>
</el-table-column>
1
2
3
4
5
6
7
2
3
4
5
6
7