ElementUI table表格列动态渲染

向右看齐 2023-01-17 08:25 483阅读 0赞

# 一、概述 #

一般写table时，列都是固定。现有业务需求，列是不固定的。根据api返回的数据，进行动态渲染。

官方table示例，链接如下：

[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]

# 二、实现 #

在此基础上，增加tableHeader 变量，用来动态渲染。

test.vue

<template>
      <div class="root">
        <el-table
          :data="tableData"
          style="width: 100%"
          :fit='true'
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                           :key="index">
    
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
      export default {
        name: "test",
        data() {
          return {
            tableHeader: {
              date: "日期",
              name: "姓名",
              address: "地址",
            },
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            }]
          }
        },
        methods: {
          formatter(row, column) {
            return row.address;
          }
        }
    
      }
    </script>
    
    <style scoped>
      .root {
        margin: 20px 25px 0px 25px;
      }
    </style>

效果如下：

![a8599b39950c0a3fb9ea1df986cc9aee.png][]

说明：

修改tableHeader 和tableData，注意对应关系即可。

:fit='true'  宽度自适应

sortable 排序

show-overflow-tooltip 当内容过长被隐藏时显示

再增加2列，修改修改tableHeader 和tableData

<template>
      <div class="root">
        <el-table
          :data="tableData"
          style="width: 100%"
          :fit='true'
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                           :key="index">
    
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
      export default {
        name: "test",
        data() {
          return {
            tableHeader: {
              date: "日期",
              name: "姓名",
              address: "地址",
              age:"年龄",
              phone:"电话",
            },
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              age:18,
              phone:"12345678910",
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              age:19,
              phone:"12345678911",
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              age:20,
              phone:"12345678912",
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
              age:21,
              phone:"12345678913",
            }]
          }
        },
        methods: {
          formatter(row, column) {
            return row.address;
          }
        }
    
      }
    </script>
    
    <style scoped>
      .root {
        margin: 20px 25px 0px 25px;
      }
    </style>

效果如下：

![f0c00e58e4ea7231ae298c38d3f477af.png][]

本文参考链接：

[https://www.jianshu.com/p/064a49f1752c][https_www.jianshu.com_p_064a49f1752c]

[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[a8599b39950c0a3fb9ea1df986cc9aee.png]: /images/20221021/b881ddfd5e0f46f5a4480783be230817.png
[f0c00e58e4ea7231ae298c38d3f477af.png]: /images/20221021/2fbbe7b08c364bf6a28b926f4c8bcd00.png
[https_www.jianshu.com_p_064a49f1752c]: https://www.jianshu.com/p/064a49f1752c