ElementUI table表格列动态渲染

发布时间:2021-04-27 16:15:51编辑:admin阅读(742)

    一、概述

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

    官方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>


     

    效果如下:

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


     

    效果如下:

    1.png

     

    本文参考链接:

    https://www.jianshu.com/p/064a49f1752c


关键字