When developing a project, the fixed page table title and content can not meet the needs. Different table headers and table contents need to be loaded dynamically according to different needs. The specific implementation code is as follows:

<template>
  <div class="boxShadow">
    <div style="margin-top: 20px">

      <el-table
        :data="tables"
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change='selectArInfo'>
        <el-table-column type="selection" width="45px"></el-table-column>
        <el-table-column label="Serial number" width="62px" type="index">
        </el-table-column>
        <template v-for='(col) in tableData'>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            :prop="col.dataItem"
            :label="col.dataName"
            :key="col.dataItem"
            width="124px">
          </el-table-column>
        </template>
        <el-table-column label="operation" width="80" align="center">
          <template slot-scope="scope">
            <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>
  </div>

</template>

<script>
  import '../../assets/css/commlist.css'
  import '../../assets/css/commscoped.sass'
  export default {
    data () {
      return {
        tables: [{
          xiaoxue: 'Forlan',
          chuzhong: 'Add aromatic',
          gaozhong: 'Pu Temple',
          daxue: 'Xi'an',
          yanjiusheng: 'Xi'an',
          shangban: 'Beijing'
        }, {
          xiaoxue: 'Nanfang',
          chuzhong: 'source of sweet water',
          gaozhong: 'source of sweet water',
          daxue: 'Xi'an',
          yanjiusheng: 'Xi'an',
          shangban: 'Nanfang'
        }, {
          xiaoxue: 'Mashan',
          chuzhong: 'Add aromatic',
          gaozhong: 'Pu Temple',
          daxue: 'Xi'an',
          yanjiusheng: 'Chongqing',
          shangban: 'Beijing'
        }],
        tableData: [{
          dataItem: 'xiaoxue',
          dataName: 'Primary school'
        }, {
          dataItem: 'chuzhong',
          dataName: 'Junior middle school'
        }, {
          dataItem: 'gaozhong',
          dataName: 'high school'
        }, {
          dataItem: 'daxue',
          dataName: 'University'
        }, {
          dataItem: 'yanjiusheng',
          dataName: 'Graduate student'
        }, {
          dataItem: 'shangban',
          dataName: 'go to work'
        }]
      }
    },
    methods: {
      // Get data when table is selected
      selectArInfo (val) {
        this.selectArr = val
      }
    }
  }
</script>

The effect of implementation is shown in the figure below. This is just a small simple example. The data of the table is all written. In the process of our project development, we need to call the corresponding interface according to our own development needs to realize the corresponding table content.