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;  
  }  
}
相关推荐
江城开朗的豌豆12 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician17 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666832 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD41 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆41 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel1 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5