element-ui 表格设置显示列

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

Vue.component('ym-set-cols',{
     template: `
     
        

            

                
            
        
        
设置显示列
    
     `,
     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

3.渲染表格