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;  
  }  
}
相关推荐
李少兄1 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1012 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19432 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧3 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台3 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1003 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc3 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅5 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅5 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over6975 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript