vue中对el-table某一列数据进行去重处理

在 Vue 中对 el-table 某一列数据进行去重处理，可以使用 computed 计算属性来实现。

首先，假设我们的表格数据是一个数组，如下所示：

data() {
  return {
    tableData: [
      { name: '张三', age: 18 },
      { name: '李四', age: 20 },
      { name: '王五', age: 18 },
      { name: '赵六', age: 20 },
      { name: '钱七', age: 22 },
    ],
  };
},

假设我们要对表格中的年龄列进行去重处理，可以使用 computed 计算属性来实现。

computed: {
  distinctAges() {
    const ages = this.tableData.map(item => item.age);
    return [...new Set(ages)];
  },
},

在模板中通过 v-for 循环渲染计算属性中去重后的年龄数据。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      {{ scope.row.age }}
    </template>
    <template slot="header">
      <span v-for="age in distinctAges" :key="age">{{ age }}</span>
    </template>
  </el-table-column>
</el-table>

这样就可以在表格的年龄列中展示去重后的年龄数据了。