el-tabl 列数不确定 灵活展示

https://blog.csdn.net/weixin_33739646/article/details/93476298

<template>
  <div class="abnormal-data-table">
   <basic-table :data="contents" stripe>
       <el-table-column v-for="(item, index) in contentsTitle" :key="index" :label="item">
          <template scope="scope">
            <span>{{scope.row[index]}}</span>
          </template>
        </el-table-column>
    </basic-table>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import BasicTable from '@/components/table/BasicTable.vue';

@Component({
  components:{
    BasicTable
  }
})
export default class AbnormalDataTable extends Vue {
  private contentsTitle=['名称','年龄','性别']
  private contents = [
　　['小名','23','男'],
　　['小红','20','女'],
　　['小樱','19','女']
　]
}
</script>

<style lang='scss' scoped>
.abnormal-data-table {
  margin-top: 15px;
}
</style>

第二种：

<template>
  <div class="abnormal-data-table">
    <basic-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(col,index) in cols" :key="index" :prop="col.prop"  :label="col.label" >
      </el-table-column>
    </basic-table>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import BasicTable from '@/components/table/BasicTable.vue';

@Component({
  components:{
    BasicTable
  }
})
export default class AbnormalDataTable extends Vue {
	private 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 弄'
      }]
      private cols= [
          {prop: 'date', label: '日期'},
        {prop: 'name', label: '姓名'},
      ]
}
</script>

<style lang='scss' scoped>
.abnormal-data-table {
  margin-top: 15px;
}
</style>