vue + element-ui实现表格嵌套

最新推荐文章于 2024-08-19 09:56:27 发布

爬坑的小白

最新推荐文章于 2024-08-19 09:56:27 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ZJ15981837003/article/details/107347158

版权

效果
在这里插入图片描述
数据结构：

html:

<el-table
              :data="tableData"
              :header-cell-style="{textAlign:'center'}"
              :cell-style="{textAlign:'center'}"
              style="width: 100%">
                <el-table-column
                  fixed="left"
                  prop="hall.hall_name"
                  label="场地"
                  width="120">
                </el-table-column>
                <el-table-column  v-for="(item,index) in columnFirstOptions" :key="index" :label="item.date" >
                   <el-table-column
                     width="120"
                     label="上午">
                     <template slot-scope="scope"  >
                       <span
                         class="order"
                         v-if="scope.row.list[index].occupier[0].id"
                         @click="getDetails(scope.row.list[index].occupier[0].id)">{{scope.row.list[index].occupier[0].name}}                  	
                         </span>
                     </template>
                   </el-table-column>
                  <el-table-column
                    width="120"
                    label="下午">
                    <template slot-scope="scope"  >
                      <span
                        v-if="scope.row.list[index].occupier[1].id"
                        class="order"
                        @click="getDetails(scope.row.list[index].occupier[1].id)">{{scope.row.list[index].occupier[1].name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="120"
                    label="晚上">
                    <template slot-scope="scope"  >
                      <span
                        v-if="scope.row.list[index].occupier[2].id"
                        class="order"
                        @click="getDetails(scope.row.list[index].occupier[2].id)">{{scope.row.list[index].occupier[2].name}}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
            </el-table>