element ui table组件复用

怎么实现element ui中el-table的复用

参考资料：https://segmentfault.com/a/1190000012054846
思路分析利用v-for来循环渲染加载el-table-column
需要具备的知识点：（1）v-for循环
（2） 父传子数据

步骤一：

先封装一个table可以引入到其他父组件中

<!--table子组件封装-->
<template>
    <el-table :data="value.tableData" border>
        <el-table-column v-for="(item,key) in value.tableKey" 
        :key="key"
        :prop="item.value"
        :label="item.name"></el-table-column>
    </el-table>
</template>
<script>
export default{
    name: 'table',
   props:{
    value: {
      type: Object,
      default: true
    }
   },//子传父
    data(){
        return{

        }
    },
}
</script>
<style>

</style>

步驟二：父组件构建

<template>
  <div>
      <!--绑定数据传值给子组件-->
    <tableC :value="value"></tableC>
  </div>
</template>
<script>
import TableComponents from "@/components/table";//引入table子组件
export default {
  data() {
    return {
    //value需要传递数据
      value:{
          tableData:[],
          tableKey:[
              {
                  name:'频道名称',
                  value:'cate_name'
              },
              {
                  name:'频道类型',
                  value:'cate_sname'
              }
          ]
      }
    };
  },
  //注册子组件table
  components: {
    tableC: TableComponents
  },
  methods: {

    //利用getFormData函数方法
    getFormData() {
     
      this.$axios
        .post("https://api.apiopen.top/musicBroadcasting")
        .then(res => {
            console.log(res);
          if (res.data.code == 200) {
              //成功操作
              console.log(res.data.result[0].channellist);
            this.value.tableData = res.data.result[0].channellist; 
            console.log(this.value.tableData);
          }
        })
        .catch(err => {
        // 失败操作
          this.$message({
            type: "error",
            message: "添加数据失败!"
          });
        });
    }
  },
  mounted() {
    //   调用getFormData函数方法
    this.getFormData();
  }
};
</script>

<style>
</style>