el-table-column动态显示行

### 使用 `el-table-column` 组件实现表格行的动态显示 为了实现在 Vue.js 和 Element UI 中通过 `el-table-column` 动态展示表格数据，可以采用如下方法： 定义一个计算属性来处理要渲染的数据结构。对于每一列，如果该列为第一个元素，则应显示对应的属性名称；其他情况下则按照年份顺序依次填充相应的数值。 在模板部分，使用 `<el-table>` 来创建表格，并利用循环遍历的方式构建所需的列。其中一列表示各个属性的名字，而其他的则是不同年度的具体表现情况[^1]。 ```html <template> <div id="app"> <!-- 当存在 perf_yearly 数据时才渲染 --> <el-table class="statusInfo" v-if="perfYearlyVisible" :data="transformedData"> <!-- 属性名列 --> <el-table-column width="180px"> <template slot-scope="scope">{{ perfYearlyColumnList[scope.$index] }}</template> </el-table-column> <!-- 年度数据列 --> <el-table-column v-for="(year, index) in yearList" :key="index" :label="year" align="center" > <template slot-scope="scope"> {{ scope.row[index] }} </template> </el-table-column> </el-table> </div> </template> ``` 脚本逻辑方面，需要设置好响应式的变量并编写转换函数以适应视图层的需求: ```javascript <script> export default { data() { return { perfYearly: [ /* 原始绩效数据 */ ], perfYearlyColumnList: ['属性A', '属性B'], // 列标题数组 yearList: [2020, 2021], // 年份列表 transformedData: [] // 转换后的数据显示给前端 }; }, computed: { perfYearlyVisible(){ return Array.isArray(this.perfYearly); } }, watch:{ perfYearly(newVal){ newVal && this.transformPerformanceData(); } }, methods: { transformPerformanceData() { const result = []; for (let i = 0; i < this.yearList.length; ++i) { let rowValues = []; for (const item of this.perfYearly) { rowValues.push(item[this.yearList[i]]); } result.push(rowValues); } this.transformedData = result.map((valueSet, idx) => ({ ...this.perfYearly[idx], values: valueSet, })); } } }; </script> ``` 此代码片段展示了如何基于原始性能评估数据(`perfYearly`)以及指定的时间范围(`yearList`)来自动生成适合横向布局的表格内容。每当 `perfYearly` 发生变化时都会触发重新计算最终用于呈现的数据集 (`transformedData`)。