封装Table组件

/** 父组件A */

<Table :controlsList = controlsList></Table>


data(){
    return {
        controlsList : ['查看' , '删除' , '编辑']
    }
}


/** 父组件B */

<Table :controlsList = controlsList></Table>


data(){
    return {
        controlsList : ['查看' , '编辑']
    }
}


/** 子组件 */

<template>
<el-table :data="tableData"  border style="width: 100%">
    <el-table-column  prop="date" label="日期" width="150"> </el-table-column>
    <el-table-column  label="操作" width="100">
      <template slot-scope="scope">
        <el-button v-if='viewFlag' type="text" size="small">查看</el-button>
        <el-button v-if='editFlag' type="text" size="small">编辑</el-button>
        <el-button  v-if='removeFlag'type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  export default {
props : {
    controlsList : {
        require : true,
    }
},
watch: {
    controlsList : {
        change(){
            this.setControlsColumn();
        }
    }
},
data(){
    return {
        viewFlag : false,
        editFlag : false , 
        removeFlag : false,
    }
},
beforeDestroy(){
        this.viewFlag = false;
        this.editFlag = false ; 
        this.removeFlag = false;
},

methods : {
    setControlsColumn(){
        this.controlsList.forEach(item => {
            if(item == '查看'){
                viewFlag = true;
            }else if(item == '编辑'){
                editFlag = true;
            }else if(item == '删除'){
                removeFlag = true;
            }

        })
    }
}
  }
</script>