elementui table 插槽id转name

您可以在 `el-table-column` 组件中使用 `scoped-slot` 插槽来实现 id 转 name 的功能。

首先，您需要在表格数据中添加一个包含 id 和 name 的对象数组。例如：

tableData: [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  // ...
]

然后，在 `el-table-column` 组件中使用 `scoped-slot` 插槽来自定义渲染单元格的方式。例如：

<el-table-column label="姓名">
  <template slot-scope="scope">
    {{ tableData.find(item => item.id === scope.row.id)?.name }}
  </template>
</el-table-column>

在上面的例子中，我们使用了 `tableData.find()` 方法来查找与当前行的 id 匹配的对象，然后获取该对象的 name 属性。

请注意，我们使用了可选链操作符 `?.` 来避免在找不到匹配对象时出现错误。如果您使用的是较旧的浏览器版本，可能需要使用传统的 if-else 语句来判断是否找到匹配对象。

希望这可以帮助您实现所需的功能。

相关问题

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` 来获取城市名称。需要注意的是，这里使用了可选链操作符，需要确保代码运行的环境支持这个特性。如果不支持可选链操作符，可以使用类似 `|| ''` 的方式来避免异常。

elementui table 表格插槽下拉框 为什么数组报错

使用 Element UI 的表格插槽中，如果想要向下拉框中传入一个数组作为选项，而遇到报错的情况，通常有两个原因。

首先，可能是因为在向下拉框组件传入数组时，没有使用 `v-for` 指令进行迭代。在使用 Element UI 的表格插槽时，我们需要使用 `v-for` 遍历数组，将每个选项作为下拉框的选项传入。如果没有使用 `v-for`，会导致组件无法正确解析数组，从而报错。

其次，可能是因为在使用 `v-for` 进行迭代时，没有设置唯一的 `key` 值。在 Vue.js 中，为每个子组件设置唯一的 `key` 值是一个重要的标识，它可以帮助 Vue.js 进行高效的 DOM 更新和渲染。如果没有设置 `key` 值，会导致渲染出现问题，从而引发报错。

为了解决上述问题，我们需要在模板中使用 `v-for` 遍历数组，并为每个选项设置唯一的 `key` 值。例如：

<el-table-column label="下拉框列">
  <template slot-scope="scope">
    <el-select v-model="scope.row.selectOption">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </template>
</el-table-column>

在这个例子中，我们使用 `v-for` 遍历 `options` 数组，并为每个选项设置了唯一的 `key` 值。这样就可以正确地向下拉框中传入数组作为选项，避免报错的问题。