elementui table 使用插槽 将数组中对象的id 转为显示name

可以使用`scoped slot`和`$attrs`来实现将数组中对象的id转为显示name的功能。

首先，在定义表格列时，需要将显示id的列定义为一个 scoped slot，例如：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="城市">
      <template slot-scope="scope">
        {{ getCityName(scope.row.cityId) }}
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，第二列使用了 scoped slot，并且使用 `getCityName` 方法将 cityId 转为了对应的城市名称。

接下来，需要在组件中定义 `getCityName` 方法，例如：

export default {
  data() {
    return {
      cities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广州' },
        { id: 4, name: '深圳' },
      ],
      tableData: [
        { name: '张三', cityId: 1 },
        { name: '李四', cityId: 2 },
        { name: '王五', cityId: 3 },
        { name: '赵六', cityId: 4 },
      ],
    };
  },
  methods: {
    getCityName(cityId) {
      const city = this.cities.find((c) => c.id === cityId);
      return city ? city.name : '';
    },
  },
};

在这个例子中，组件的 data 中定义了一个 cities 数组，用于存储城市 id 和名称的对应关系。在 `getCityName` 方法中，根据传入的 cityId 参数，使用 Array.find 方法查找对应的城市对象，并返回城市名称。

最后，需要将 cities 数组传递给组件，可以使用 `$attrs` 来实现：

<template>
  <el-table :data="tableData" style="width: 100%" :attrs="attrs">
    <!-- ... -->
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      cities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广州' },
        { id: 4, name: '深圳' },
      ],
      tableData: [
        { name: '张三', cityId: 1 },
        { name: '李四', cityId: 2 },
        { name: '王五', cityId: 3 },
        { name: '赵六', cityId: 4 },
      ],
    };
  },
  methods: {
    getCityName(cityId) {
      const city = this.cities.find((c) => c.id === cityId);
      return city ? city.name : '';
    },
  },
  computed: {
    attrs() {
      return {
        cities: this.cities,
      };
    },
  },
};
</script>

在这个例子中，将 cities 数组通过计算属性的方式传递给了表格组件。在表格组件中，可以通过 `$attrs` 访问到这个数据，例如在 scoped slot 中使用：

<template>
  <el-table :data="tableData" style="width: 100%" :attrs="attrs">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="城市">
      <template slot-scope="scope">
        {{ $attrs.cities.find((city) => city.id === scope.row.cityId)?.name }}
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，使用了 `$attrs.cities.find` 方法来查找对应的城市对象，并使用 `?.name` 来获取城市名称。需要注意的是，这里使用了可选链操作符，需要确保代码运行的环境支持这个特性。如果不支持可选链操作符，可以使用类似 `|| ''` 的方式来避免异常。