美文网首页
Elementui table合并表格(二)

Elementui table合并表格(二)

作者: 落花夕拾 | 来源:发表于2019-08-28 17:59 被阅读0次
 <el-table
                        :data="tableData6"
                        style="width: 100%"
                        border
                        :loading="loading">
                    <el-table-column
                            type="index">
                    </el-table-column>
                    <el-table-column
                            label="所属单位"
                            prop="departmentName">
                    </el-table-column>
                    <el-table-column label="场所" prop="stationName"></el-table-column>
                    <el-table-column label="区域类型" prop="locationSummaries">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div class="span-border">{{ item.categoryName }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域名称" prop="locationSummaries">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div class="span-border">{{ item.locationName }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域面积(㎡)">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div class="span-border">{{ item.dimension }}</div>
                            </div>
                        </template>
                    </el-table-column>
                   <el-table-column label="器材类型">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div v-for="item0 in item.eqSummaries">
                                    <div class="span-border">{{ item0.eqTypeName }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="规格名称" width="220px">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div v-for="item0 in item.eqSummaries">
                                    <div v-for="item1 in item0.specSummaries">
                                        <div stytle="border-bottom: 1px solid #ebeef5;" class="span-border1">{{ item1.eqSpecName }}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="配置数量">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.locationSummaries">
                                <div v-for="item0 in item.eqSummaries">
                                    <div v-for="item1 in item0.specSummaries">
                                        <div stytle="border-bottom: 1px solid #ebeef5;" class="span-border1">{{ item1.number }}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="消防通道数量" prop="fireEscapeNum"></el-table-column>
                    <el-table-column label="摄像头数量" prop="cameraNum"></el-table-column>
                    <el-table-column label="保安数量" prop="securityGuardNum"></el-table-column>
                </el-table>

tips:表格会有错位,待解决

相关文章

网友评论

      本文标题:Elementui table合并表格(二)

      本文链接:https://www.haomeiwen.com/subject/ukbmectx.html