【ElementUI】el-table对象数组嵌套对象数组_el-table 三层对象

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
呐喊的生姜 · 当年《下一站，幸福》炮灰男二的他，如今成了金 ...· 3 月前 ·
忐忑的香菜 · 蓝湖的使用_mastergo怎么上传蓝湖-C ...· 9 月前 ·
豁达的开心果 · 小改款为主、推出“换标”车 ...· 1 年前 ·
力能扛鼎的夕阳 · 赋能大湾区高质量发展，广铁集团年内力争开通“ ...· 1 年前 ·
果断的莴苣 · 蔚来出海，李斌：先入挪威，明年进入五个欧洲国 ...· 1 年前 ·
正常使用elementUI的el-table时，其绑定的数据是一个对象数组，如果这个数组中的对象又包含一层对象数组，直接去渲染则无法实现，比如这种数据：
 const staticData= [{
            "departmentName": "abc",
            "monthData": [{
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "1"
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "2"
此时需要处理一下，可以在data中使用新的数组来作为label，使得内层数据可以同行显示。
 代码如下，另外加一个columnIndex数组，用来存储数据里面的属性的key。 
效果图：可以看到，monthData里面的数据也渲染到表格里面了
 
 代码： 
<template>
	<el-table :data="tableData" border>
     <el-table-column
        label="公司"
        prop="departmentName">
        </el-table-column>
                    <el-table-column 
                        key="年" 
                        label="每月达标率（%）">
                        <el-table-column v-for="(item,index) in months" :key="item" :label="item">
                            <template slot-scope="scope">
                                <span>{{scope.row.monthData[index].complianceRate}}</span>
                            </template>	
                        </el-table-column>
                    </el-table-column>
	</el-table>
</template>
<script>
export default {
    data(){
        const staticData= [{
            "departmentName": "abc",
            "monthData": [{
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "1"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "2"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "3"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "4"
            }, {
                "complianceRate": 82.71,
                "patrolLength": "62151.00",
                "actualPatrol": "51403.77",
                "monthOrWeekOrDay": "5"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "6"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "7"
            }, {
                "complianceRate": 33.0,
                "monthOrWeekOrDay": "8"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "9"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "10"
            }, {
                "complianceRate": 13.0,
                "monthOrWeekOrDay": "11"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "12"
            }],
        }, {
            "departmentName": "bcd",
            "monthData": [{
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "1"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "2"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "3"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "4"
            }, {
                "complianceRate": 69.68,
                "patrolLength": "55661.00",
                "actualPatrol": "38784.54",
                "monthOrWeekOrDay": "5"
            }, {
                "complianceRate": 88.0,
                "monthOrWeekOrDay": "6"
            }, {
                "complianceRate": 77.0,
                "monthOrWeekOrDay": "7"
            }, {
                "complianceRate": 66.0,
                "monthOrWeekOrDay": "8"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "9"
            }, {
                "complianceRate": 44.0,
                "monthOrWeekOrDay": "10"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "11"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "12"
            }],
        }, {
            "departmentName": "efg",
            "monthData": [{
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "1"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "2"
            }, {
                "complianceRate": 43.0,
                "monthOrWeekOrDay": "3"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "4"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "5"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "6"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "7"
            }, {
                "complianceRate": 0.0,
                "monthOrWeekOrDay": "8"
            }, {
                "complianceRate": 4.0,
                "monthOrWeekOrDay": "9"
            }, {
                "complianceRate": 88.0,
                "monthOrWeekOrDay": "10"
            }, {
                "complianceRate": 6.0,
                "monthOrWeekOrDay": "11"
            }, {
                "complianceRate": 77.0,
                "monthOrWeekOrDay": "12"
            }],
        return{
            // 有两层数据，渲染表格
            months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            tableData:staticData,
</script>
<style>
</style>
                    ue+Element-ui的el-table的多级内容渲染将多层内容渲染到表格里面平常的表格是一个对象里面的数据渲染成一行，对象里面的key就是表格的label，如果对象里面还有对象数组那该怎么去渲染，如渲染下面的数据，将一个对象渲染成一行数据，和平常的table表格的数据渲染不一样，这个不能直接渲染出来，需要加第三方的label来渲染数据data: [{        "departmentName": "上海市浦东新区建设(集团)有限公司",        "monthData": [{  
				功能需求需要对表格进行列的合并，这里要实现的是一个list中包含多个list，要循环出多个list进行表格的渲染，处理列的合并，渲染在页面上
如上图所示：当编号、名称、负责人相同时，对这些列进行合并处理，接口返回的数据格式为：数组周干包含多个对象，每个对象中又包含一个数组，需要把对象中的数组渲染出来，并进行相同信息的列的合并vue2、elementui中el–table的span-method方法span-method方法介绍：
说明：合并行或列的计算方法，类型：Function({ row, column
    ref="filterTable"
    :data="$store.state.tableData "
    :default-sort = "{prop: 'dtime', order: 'descending'}"
    highlight-current-r
				通过vue解析表头合并的表格，后台返回的数据格式为[{name:aa,list:[{value:100}]}] 通过table与v-for组合循环数据达到目的。
vue 表头合并数据解析
vue 二维数组解析
vue 二维list解析
vue table+v-for
				话不多说直接上解决方法
使用的是 span-method 属性的方法  Function({ row, column, rowIndex, columnIndex })
合并行最后的样子
1.二维数组不做处理的话，效果是这个样子的
2.首先把二维数组转换为一维数组
循环遍历把二级对象全部转为一级对象
res.data.forEach((item,index)=>{
          for(let i=0;i<item.children.length;i++){
				当在elementUI的el-table中同时使用el-table-column和el-table-column组件时，可以通过v-for指令来动态生成表格列。具体实现方式是在el-table-column组件上使用v-for指令，同时在v-for指令中使用el-table-column组件来生成表格列。
示例代码如下：
<el-table :data="tableData">
  <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
    <!-- 这里可以添加自定义内容 -->
  </el-table-column>
</el-table>
其中，columns是一个数组，包含了每一列的属性和标签信息。tableData是表格数据。