关于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>