vue 表单渲染操作之单元格多选，数据data的长度不确定，data的item的长度也不确定。

vue 表单操作之单元格多选。

项目需求根据商家数据，展示内容，实现单元格多选，商家数据data的长度不确定，data的item的长度也不确定。

ps：样式没有写有点丑，可根据自己需求写样式。
用到了element-ui的多选框

		<table>
             <thead>
               <tr>
                 <td v-for="(item,index) in tablehander" :key="index">{{item.type}}</td>
               </tr>
             </thead>
             <tbody>
               <tr v-for="(item,index) in tableData" :key="index">
                 <td v-for="(value,key,index) in item" :key="index" v-if="index >= 1" >
                   <div v-if="key=='date'">{{value}}</div>
                   <el-checkbox :label="value" border v-else-if="value=='已预订' && key !=='date'" disabled></el-checkbox>
                   <el-checkbox :label="value" border v-else></el-checkbox>
                 </td>
               </tr>
             </tbody>
           </table>

data数据
			//表头数据
                tablehander:[ 
                  {
                    type:'时间',
                    value:'date',
                  },
                   {
                    type:'室内网球场1号',
                    value:'arena1',
                  }, {
                    type:'室内网球场2号',
                    value:'arena2',
                  }, {
                    type:'室内网球场3号',
                    value:'arena3',
                  }
                ],
                //表格数据
                tableData: [
                  {
                    id:'1',
                    date: '7:00',
                    arena1: '已预订',
                    arena2: '10$',
                    arena3: '10$',
                  }, {
                    id:'2',
                    date: '8:00',
                    arena1: '10$',
                    arena2: '已预订',
                    arena3: '10$',
                  }, {
                    id:'3',
                    date: '9:00',
                    arena1: '10$',
                    arena2: '10$',
                    arena3: '10$',
                  }, {
                    id:'4',
                    date: '10:00',
                    arena1: '10$',
                    arena2: '已预订',
                    arena3: '10$',
                  }, {
                    id:'5',
                    date: '11:00',
                    arena1: '10$',
                    arena2: '已预订',
                    arena3: '10$',
                  }
                  , {
                    id:'6',
                    date: '12:00',
                    arena1: '10$',
                    arena2: '已预订',
                    arena3: '10$',
                  }
                ],

新手小白，不喜勿喷，还请大佬多多指教。