使用VUE3+Element Plus 实现动态表格

原创已于 2023-02-03 13:44:11 修改 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2022-07-26 17:07:41 首次发布

Element Plus 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Vue的el-table组件，通过数据驱动的方式实现表格的列头根据prop配置动态渲染，并演示了如何调整表头顺序及自定义表头显示。实例代码展示了如何利用`tableData`和`tableHeader`配合使用，实现灵活的数据展示。

他的原理是，只要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>