关于vue.js:elementui-表格设置显示列

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

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>