动态添加el-table-column及对应数据

不多说,直接贴代码
<template>

      <el-table :data="list" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">

        <el-table-column v-for="item in itemOptions" :key="item.id" :label="item.title" :prop="item.key" sortable="custom"

          align="center" width="65">

          <template slot-scope="scope">

            <span>{{ scope.row[itemTitle.key] }}</span>

          </template>

        </el-table-column>

      </el-table>

    </template>

export default {

  name: "user-management",

  components: { Pagination },

  },

  data() {

    return {

      itemOptions: [

        { id: 0, title: "序号", type: "text", key: "id" },

        { id: 1, title: "用户名", type: "text", key: "username" },

        { id: 2, title: "姓名", type: "text", key: "truename" },

        { id: 3, title: "手机号", type: "text", key: "phone" },

        { id: 4, title: "年龄", type: "text", key: "age" }

      ],

      list: [

        {

          id: 0,

          username: "Rex",

          truename: "user1",

          phone: "11111111111",

          age: "19"

        },

        {

          id: 1,

          username: "Ted",

          truename: "user2",

          phone: "11111111111",

          age: "16"

        }

      ]

    };

  }

};