vue3-Element-Plus 配置动态表格

vue3 配置动态表格

---

前言

一、动态表格是什么？

表头包含了列的信息，例如列名、列类型、列宽等；

表体包含了数据的信息，例如每行数据的值等。

二、代码

1. 模板样式

代码如下（示例）：

		<div style="height: calc(100% - 30px)">
						<el-table
							border
							:data="getSOHValues"
							style="width: 100%"
							:show-header="false"
							:cell-style="{ 'text-align': 'center' }"
							:row-class-name="tableRowClassName"
						>
					     <el-table-column v-for="(item, index) in getSOHHeaders" 	:key="index" :prop="item" width="100"> </el-table-column>
						</el-table>
					</div>

2.设置新建的表头的样式

代码如下（示例）：

//指定行颜色
const tableRowClassName = ({ row, rowIndex }) => {
	if (row.title == '信号' && `${row.value}${rowIndex}`) {
		return 'warm-row';
	}
};
// 这里不要加scoped 加了可能样式会失效
<style lang="scss">
.warm-row {
	background-color: rgb(236, 245, 255) !important;
}
</style>

3.定义变量内容：

import { reactive ，computed} from 'vue';  //按需导入需要的
const state = reactive({
SOHheaders: [
		{
			prop: 'Name',
			label: '信号',
		},
		{
			prop: 'value',
			label: '值',
		},
	],
})

3.1 getTableData为后端返回的数据

//表头
const getSOHHeaders = computed<string>(() => {
	return state.getTableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title']);
});
//值
const getSOHValues = computed<any>(() => {
	return state.SOHheaders.map((item) => {
		return state.getTableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { title: item.label });
	});
});

4. 最后结果如下图：