JSX 实现 Element-ui 表格列动态渲染

2024/3/7 Vue

使用 JSX、render 自定义表格组件。

提供两种实现方式:一种使用 scopedSlots 插槽实现,一种使用表格列 formatter 函数实现。

  1. 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
  1. 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