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;  
  }  
}
相关推荐
Codebee1 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲5 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊5 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅7 分钟前
JavaScript 函数详解
前端·javascript
金金金__10 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪11 分钟前
工业仿真(simulation)--前端(二)-资源管理器
前端
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css