el-table 中数据嵌套绑定

最新推荐文章于 2025-04-28 14:06:58 发布

Demon_LHY

最新推荐文章于 2025-04-28 14:06:58 发布

阅读量5.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： VUE.js 文章标签： vue 可视化

本文链接：https://blog.youkuaiyun.com/demon_lhy/article/details/114692457

VUE.js 专栏收录该内容

5 篇文章

订阅专栏

现有需求：前三列显示省份，城市，以及一个固定值，后边循环出十二个月份，每个月显示5个字段，

显示效果如下图

数据格式如下

{
    "Data":[
        {
            "provincename":"河北省",
            "cityname":"石家庄市",
            "baseamount":"0",
            "infolist":[
                {
                    "year":"2021",
                    "month":"01",
                    "amount1":"0",
                    "industryamount":"0",
                    "value1":"0",
                    "amount2":"0",
                    "amount3":"0.03"
                },
                {
                    "year":"2021",
                    "month":"02",
                    "amount1":"0",
                    "industryamount":"0",
                    "value1":"0",
                    "amount2":"0",
                    "amount3":"0.03"
                },
                {
                    "year":"2021",
                    "month":"03",
                    "amount1":"0",
                    "industryamount":"0",
                    "value1":"0",
                    "amount2":"0",
                    "amount3":"0.03"
                }
            ]
        }
    ]
    
}

获取data 数据赋值给tableData，然后data 中的infolist赋值给tableDataline

el-table 使用 :data 绑定 tableData 数据源

el-table-column绑定完三个字段后使用v-for 在el-table-column循环绑定tableDataline

直接上代码

<el-table :data="tableData" border stripe v-loading="loading">
        
        <el-table-column align="center" label="省份">
          <template scope="scope">{{ scope.row.provincename }}</template>
        </el-table-column>
        <el-table-column align="center" label="城市">
          <template scope="scope">{{ scope.row.cityname }}</template>
        </el-table-column>
        <el-table-column align="center" label="2020年度基础">
          <template scope="scope">{{ scope.row.baseamount }}</template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableDataline"
          :label="item.new_year + item.new_month"
          v-bind:key="index"
        >
          <el-table-column
            align="center"
            label="数据1"
          >
            <template>{{ item.amount1 }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="数据2"
          >
            <template>{{ item.industryamount }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="数据3"
          >
            <template>{{ item.new_value1 }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="数据4"
          >
            <template>{{ item.amount2 }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="数据5"
          >
            <template>{{ item.amount3 }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>