element-ui 表格设置显示列

先写一个设置显示列的组件

Vue.component('ym-set-cols',{
     template: `
     <el-popover
        placement="bottom"
        width="200"
        trigger="click">
        <div class="cols-flex">
            <div v-for="item in tableCols">
                <el-checkbox v-model="item.isCheck" :label="item.name" @change="checkChange"></el-checkbox>
            </div>
        </div>
        <div class="set-cols" slot="reference">设置显示列</div>
    </el-popover>
     `,
     data() {
        return {
            tableCols: []
        }
     },
     model: { // 自定义组件双向绑定
        prop: 'cols',
        event: 'complete'
     },
     props: {
        cols: Array
     },
     mounted() {
        this.tableCols = this.cols.map(item=>item)
     },
     methods: {
        checkChange(item) {
            // 过滤取消选中的列
            let temp = this.tableCols.filter(item=>item.isCheck)
            this.$emit('complete',temp)
        }
     }
 })

父组件：
1.声明一个表格列的对象

let tableCols = [{
        name: '头像',
        width: '66',
        align: 'center',
        key: 'FHEADIMGURL',
        isCheck: true
    }, {
        name: '标签组',
        minWidth: '200', 
        align: 'center',
        key: 'TAG_LIST',
        isCheck: true
    }
]

2.加载组件ym-set-cols

<ym-set-cols v-model="tableCols"></ym-set-cols>

3.渲染表格

<el-table :data="tableData">
    <el-table-column :prop="col.key" :label="col.name" :align="col.align || 'left'" :width="col.width || ''" :min-width="col.minWidth || ''" v-for="col in tableCols">
        <template slot-scope="scope">
            <template v-if="col.key === 'FHEADIMGURL'">
                // 自定义内容1
            </template>
            <template v-else-if="col.key === 'TAG_LIST'">
                // 自定义内容2
            </template>
            <template v-else>
                // 默认内容
                {{scope.row[col.key]}}
            </template>
        </template>
    </el-table-column>
</el-table>