需求:在表格的一栏中通过for循环渲染多个CheckBox,效果图如下:
首先看看数据结构,data()中的数据如下:
tableData: [
{
page: '启动页',
allSelect: false,
pagePermission:true,
operationPermission: [{key:'新增',status:true},{key:'删除',status:false},{key:'编辑',status:true}],
dataPermission: false
},
{
page: '轮播广告',
allSelect: false,
pagePermission: true,
operationPermission: [{key:'新增',status:true},{key:'删除',status:true},{key:'编辑',status:false}],
dataPermission: false
},
{
page: '运营活动',
allSelect: false,
pagePermission: true,
operationPermission: [{key:'新增',status:false},{key:'删除',status:true},{key:'编辑',status:true}],
dataPermission: true
}
]
for循环渲染的CheckBox如下:
{
title: '操作权限',
key: 'operationPermission',
align: 'center',
width: 400,
render: (h, params) => {
let arr=[];
params.row.operationPermission.forEach((item,index)=>{
arr.push(h('Checkbox', {
props: {
size:'large',
value: item.status
},
style: {
marginRight: '20px'
},
on: {
'on-change': () => {
console.log(item,index)
}
}
}, item.key))
});
return h('div',arr)
}
}
完整的自定义列渲染数据如下:
columns: [
{
title: '页面',
key: 'page',
align: 'center',
width: 200
},
{
title: '全选',
key: 'allSelect',
align: 'center',
width: 100,
render: (h, params) => {
return h('div', [
h('Checkbox', {
props: {
size:'large',
value: params.row.allSelect
},
style: {
marginRight: '5px'
},
on: {
'on-change': () => {
console.log(params.index)
}
}
}, '全选'),
]);
}
},
{
title: '页面权限',
key: 'pagePermission',
align: 'center',
width: 100,
render: (h, params) => {
return h('div', [
h('Checkbox', {
props: {
size:'large',
value: params.row.pagePermission
},
style: {
marginRight: '5px'
},
on: {
'on-change': () => {
console.log(params.index)
}
}
}, '查看'),
]);
}
},
{
title: '操作权限',
key: 'operationPermission',
align: 'center',
width: 400,
render: (h, params) => {
let arr=[];
params.row.operationPermission.forEach((item,index)=>{
arr.push(h('Checkbox', {
props: {
size:'large',
value: item.status
},
style: {
marginRight: '20px'
},
on: {
'on-change': () => {
console.log(item,index)
}
}
}, item.key))
});
return h('div',arr)
}
},
{
title: '数据权限',
key: 'dataPermission',
align: 'center',
width: 200,
render: (h, params) => {
return h('div', [
h('Checkbox', {
props: {
size:'large',
value: params.row.dataPermission
},
style: {
marginRight: '5px'
},
on: {
'on-change': () => {
console.log(params.index)
}
}
}, '点击量'),
]);
}
}
]