使用VUE3+Element Plus 实现动态表格
使用VUE3+Element Plus 实现动态表格
·
他的原理是,只要el-table表格数据的键(tableData.list的键),与遍历时表头的prop对应上(tableHeader的值),就可将数据渲染上去。
如果需要更改表头顺序,只需要对tableHeader进行排序即可。
(当然,跟后端关系好,可以让后端直接返回表头,前端仅需遍历即可)
预览效果:
整体代码如下
<template>
<el-table :data="tableData.list">
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:label="item"
:prop="item"
></el-table-column>
</el-table>
</template>
<script>
import { reactive } from "vue";
export default {
name: "APP",
setup() {
// 表格展示数据
let tableData = reactive({
list: [
{
"06/20": "34.0",
"06/21": "23.0",
"06/29": "1.0",
},
{
"06/20": "24.0",
"06/21": "24.0",
"06/29": "2.0",
},
{
"06/20": "35.0",
"06/21": "35.0",
"06/29": "3.0",
},
{
"06/20": "",
"06/21": "",
"06/29": "",
},
{
"06/20": "23.0",
"06/21": "23.0",
"06/29": "5.0",
},
{
"06/20": "269.0",
"06/21": "256.0",
"06/29": "36.0",
},
],
});
tableData.list.forEach((item, key) => {
item["name"] = "第" + (key + 1) + "行";
});
// 获取表头
const tableHeader = Object.keys(tableData.list[0]);
return {
tableData,
tableHeader,
};
},
};
</script>
也可以将表头的键值对取出来,前端自定义表头的中文名称,达到这个效果
<template>
<el-table :data="tableData.list">
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:label="item.value"
:prop="item.key"
>
</el-table-column>
</el-table>
</template>
<script>
import { reactive } from "vue";
export default {
name: "APP",
setup() {
// 表格展示数据
let tableData = reactive({
list: [
{
"06/20": "34.0",
"06/21": "23.0",
"06/29": "1.0",
},
{
"06/20": "24.0",
"06/21": "24.0",
"06/29": "2.0",
},
{
"06/20": "35.0",
"06/21": "35.0",
"06/29": "3.0",
},
{
"06/20": "",
"06/21": "",
"06/29": "",
},
{
"06/20": "23.0",
"06/21": "23.0",
"06/29": "5.0",
},
{
"06/20": "269.0",
"06/21": "256.0",
"06/29": "36.0",
},
],
});
tableData.list.forEach((item, key) => {
item["name"] = "第" + (key + 1) + "行";
});
// 生成表头
const tableHeader = generateHeader();
function generateHeader() {
const result = [
{
key: "name",
value: "表头",
},
];
for (let item in tableData.list[0]) {
if (item !== "name") {
const obj = {
key: item,
value: item,
};
result.push(obj);
}
}
return result;
}
return {
tableData,
tableHeader,
};
},
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)