el-table-column 遍历 如何将 year 作为表头 processstatus为值

使用 Vue 的计算属性来动态生成列,并使用 v-for<el-table><el-table-column> 上来遍历这些列。此外,我们还需要一个方法来处理每行数据的显示,因为每行的数据(sonList)需要根据年份来显示对应的 processStatus

  1. tableHeaders 计算属性生成了所有唯一的年份,并为每个年份创建了一个列对象。每个列对象都有一个 prop,但实际上这个 prop<el-table-column> 中不会被用于数据绑定(因为数据是动态获取的),它只是作为一个占位符。
  2. <el-table-column> 的模板中,我们使用了 getStatusByYear 方法来根据行数据和列头(年份)来获取相应的 processStatus
  3. 这种方法的一个限制是,你不能直接在 <el-table-column>prop 中绑定动态数据,因为列是静态声明的。相反,我们使用模板和插槽来动态显示数据。
javascript 复制代码
[
	{
		cityCode: "411400",
		cityName: "商丘市",
		countyCode: "411421",
		countyName: "民权县",
		sonList:[{
				processStatus: null,
				year: "2024"
			},
			{
				processStatus: '1',
				year: "2025"
			},
			{
				processStatus: '2',
				year: "2026"
			}]
	},
	{
		cityCode: "411400",
		cityName: "商丘市",
		countyCode: "411421",
		countyName: "民权县",
		sonList:[{
				processStatus: null,
				year: "2024"
			},
			{
				processStatus: '1',
				year: "2025"
			},
			{
				processStatus: '2',
				year: "2026"
			}]
	}
]
javascript 复制代码
<el-table :data="ManageList" style="width: 100%">  
  <!-- 动态列 -->  
  <el-table-column  
    v-for="header in tableHeaders"  
    :key="header.label"  
    :label="header.label"  
    :prop="header.prop"  
    width="header.width">  
    <template slot-scope="scope">  
      <!-- 使用方法获取对应年份的processStatus -->  
      <span>{{ getStatusByYear(scope.row, header.label) }}</span>  
    </template>  
  </el-table-column>  
</el-table>
javascript 复制代码
computed: {  
  // 计算属性来生成表头  
  tableHeaders() {  
    const uniqueYears = new Set();  
    this.ManageList.forEach(item => {  
      item.sonList.forEach(son => {  
        uniqueYears.add(son.year);  
      });  
    });  
    return Array.from(uniqueYears).map(year => ({  
      prop: `status_${year}`, // 假设我们为每个年份生成一个prop  
      label: year, // 表头标签  
      width: 100 // 可以根据需要设置宽度  
    }));  
  }  
},  
javascript 复制代码
methods: {  
  // 方法来根据年份获取对应的 processStatus  
  getStatusByYear(row, year) {  
    const item = row.sonList.find(son => son.year === year);  
    return item ? item.processStatus : null;  
  }  
}
相关推荐
脑袋大大的16 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0126 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui