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 中绑定动态数据，因为列是静态声明的。相反，我们使用模板和插槽来动态显示数据。

 

[
	{
		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"
			}]
	}
]

<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>

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 // 可以根据需要设置宽度  
    }));  
  }  
},  

methods: {  
  // 方法来根据年份获取对应的 processStatus  
  getStatusByYear(row, year) {  
    const item = row.sonList.find(son => son.year === year);  
    return item ? item.processStatus : null;  
  }  
}