el-table表格里面显示数组编号，修改为显示对应的数组名字

为了将表格中的某个列显示为数组中的名称而不是编号，你需要定义一个映射关系，即将编号映射到相应的名称。假设你有一个数组 namesArray，其中包含了编号和名称的对应关系，你可以使用这个数组来替换表格中的编号。

示例代码

假设你有一个 namesArray，它是一个对象数组，每个对象都有一个 id 和 name 属性。你可以在表格渲染时查找对应的名称，并显示它。

1. 定义映射数组

const namesArray = [
    { id: 1, name: '名称1' },
    { id: 2, name: '名称2' },
    { id: 3, name: '名称3' },
    // ... 其他项
];

// 示例数据
const tableData = [
    { ORGON_CODE: '999-N0000008', ID: 1, ...otherProperties },
    { ORGON_CODE: '999-N0000009', ID: 2, ...otherProperties },
    // ... 其他项
];

2. 在模板中显示名称

如果你使用的是 Vue.js，可以在模板中使用计算属性或方法来查找对应的名称。

Vue 2 示例

<template>
  <el-table :data="tableData">
    <el-table-column prop="ORGON_CODE" label="机构代码"></el-table-column>
    <el-table-column label="名称">
      <template slot-scope="scope">
        {{ getNameById(scope.row.ID) }}
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { ORGON_CODE: '999-N0000008', ID: 1, ...otherProperties },
        { ORGON_CODE: '999-N0000009', ID: 2, ...otherProperties },
        // ... 其他项
      ],
      namesArray: [
        { id: 1, name: '名称1' },
        { id: 2, name: '名称2' },
        { id: 3, name: '名称3' },
        // ... 其他项
      ]
    };
  },
  methods: {
    getNameById(id) {
      return this.namesArray.find(item => item.id === id)?.name || '未知';
    }
  }
};
</script>

Vue 3 示例

<template>
  <el-table :data="tableData">
    <el-table-column prop="ORGON_CODE" label="机构代码"></el-table-column>
    <el-table-column label="名称">
      <template v-slot="{ row }">
        {{ getNameById(row.ID) }}
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { ORGON_CODE: '999-N0000008', ID: 1, ...otherProperties },
  { ORGON_CODE: '999-N0000009', ID: 2, ...otherProperties },
  // ... 其他项
]);

const namesArray = ref([
  { id: 1, name: '名称1' },
  { id: 2, name: '名称2' },
  { id: 3, name: '名称3' },
  // ... 其他项
]);

function getNameById(id) {
  return namesArray.value.find(item => item.id === id)?.name || '未知';
}
</script>

说明

1. 映射数组 namesArray：

   • 包含了编号和名称的对应关系。

2. 获取名称的方法 getNameById：

   • 使用 Array.prototype.find 方法来查找匹配的名称。
   • 如果没有找到匹配项，则返回 '未知'。

3. 模板中的使用：

   • 在模板中使用 slot-scope（Vue 2）或 v-slot（Vue 3）来访问当前行的数据，并调用 getNameById 方法获取名称。

通过这种方式，你可以将表格中的编号替换为对应的名称，从而提高表格的可读性和用户友好性。如果 namesArray 动态变化，建议将 getNameById 方法改为计算属性或响应式函数，以确保实时更新。