vue+element做一个简单的动态表格

vue+element做一个简单的动态表格

子组件
<!-- 表格 -->
<el-table
    :data="tableData"
    height="260"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="序号"
      width="110">
    </el-table-column>
<el-table>
将这个table改成动态
<el-table
    :data="tableData"		//显示的数据
    height="260"   			//表格高度
    border   				//是否需要边框
    style="width: 100%">
    <template v-for='v in tableTitle'>
          <el-table-column
            sortable		//对应列是否可以排序
            :prop="v.dataItem"  //动态绑定标题
            :label="v.dataName" //动态绑定标题名
            :key="v.dataItem">
          </el-table-column>
        </template>
  </el-table>

父组件中对这个表格组件进行调用并传入参数

<template>
  <!-- 父组件 -->
  <div>
    <son :tableData="tableData" :tableTitle="tableTitle"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      // 表格数据
         tableData: [{
          name: '索拉卡',
          occupation:'辅助',
          city:'艾欧尼亚',
          gender:'女',
          Lines:'去治愈并保护大家',
          nickname:'奶妈'
        },
        {
          name: '迦娜',
          occupation:'辅助',
          city:'符文之地',
          gender:'女',
          Lines:'风之化身听候您的差遣',
          nickname:'风女'
        }],
        // 表格标题
        tableTitle: [{
          dataItem: 'name',
          dataName: '名字'
        }, {
          dataItem: 'occupation',
          dataName: '定位'
        }, {
          dataItem: 'city',
          dataName: '所属地'
        }, {
          dataItem: 'gender',
          dataName: '性别'
        }, {
          dataItem: 'Lines',
          dataName: '台词'
        }, {
          dataItem: 'nickname',
          dataName: '别称'
        }]
    };
  },
};
</script>

<style lang="less" scoped>
</style>

通过父组件的传值，就可以实现一个简单的动态生成的表格了