常规的确定列表格参考官网

<el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

data() {
    return {
      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 弄"
        }
      ]
    };
  },

如果需要动态列，则需要对应的存放获取的动态列。

比如从接口获取如图所示的内容，先对数据进行基本处理，存放所需要显示的列。

data() {
    return {
      cols: []
    };
  },

mounted(){
    for(let key in this.tableData[0]){
      this.colsTest.push({prop:key})
    }
}

//{prop: "date"},{prop: "name"},{prop: "address"}

<el-table :data="tableData">
      <el-table-column v-for="(item,index) in colsTest" :key="index" :prop="item.prop" :label="item.prop"></el-table-column>
    </el-table>

然后就可以啦~

2020-11-26更新

回头看了眼，感觉写的可能有点误解。。。所以再更下

实际应用中

当我们已获取到需要展示的动态列和数据时，比如。首先布局部分还是一样的

<el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(item,index) in desCol" :key="index" :prop="item.prop" :label="item.label">
          </el-table-column>
        </el-table>

然后需要再data里定义下，

data() {
    return {
      tableData: [],
      desCol: [],
    };
  },

假设通过接口获取到了动态列，

let arr = [];
        arr = [    
          { prop: "date", label: "日期" },
          { prop: "name", label: "姓名" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
          { prop: "address", label: "地址" },
        ];
//此处代替获取到的动态列，给desCol赋值
this.desCol = arr;

//此处代替获取到的需要展示的数据，给tableData赋值
let 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 弄",
        },
      ]
this.tableData=tableData;

正式收工~~~