elementui table 插槽id转name

在 Element UI 的 Table 组件中，可以使用 `scoped-slot` 来自定义表格中的一些内容，其中包括表头、表格行、单元格等。如果需要将表格中某一列的 ID 转换为对应的名称，可以在该列的单元格中使用 `scoped-slot`，并在其中进行转换。

假设表格数据为：

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
]

表格的代码示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="ID">
      <template slot-scope="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name">
      <template slot-scope="scope">
        {{ idToName(scope.row.id) }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
      ]
    }
  },
  methods: {
    idToName(id) {
      const item = this.tableData.find(item => item.id === id)
      return item ? item.name : ''
    }
  }
}
</script>

在上述示例中，我们使用了一个名为 `idToName` 的方法来将 ID 转换为对应的名称，然后在表格的 `<el-table-column>` 中使用 `scoped-slot` 来调用该方法并显示转换后的结果。具体来说，我们在 `Name` 列的单元格中使用了如下代码：

<template slot-scope="scope">
  {{ idToName(scope.row.id) }}
</template>

这里的 `scope` 对象包含了当前行的数据，我们通过 `scope.row.id` 获取当前行的 ID，并将其传递给 `idToName` 方法进行转换。最终的结果将显示在 `Name` 列的单元格中。