当前位置: 首页 > Web前端 > vue.js

element-ui表格设置显示列

时间:2023-03-31 14:39:56 vue.js

先写一个设置显示列的组件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){//过滤未检查的列lettemp=this.tableCols.filter(item=>item.isCheck)this.$emit('complete',temp)}}})Parent组件:1.声明一个表格列对象lettableCols=[{name:'Avatar',width:'66',align:'center',key:'FHEADIMGURL',isCheck:true},{name:'labelgroup',minWidth:'200',align:'center',key:'TAG_LIST',isCheck:true}]2.加载组件ym-set-cols3.渲染表//自定义内容1//自定义内容2//默认内容{{scope.row[col.key]}}</template>