iview 中table在自定义列模板通过for循环渲染多个其他组件

需求：在表格的一栏中通过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)
                  }
                }
              }, '点击量'),
            ]);
          }
        }
      ]