Vue3中自定义列名，插槽实现（例如数据为1时，表格中显示type1）

有时后端给我们传输的type类型是数字形式，同时会给一个type类型id和type类型name相对应的数组，我们需要拿着type类型id去数组中找到type类型的name，并将name显示在表格中。比如1代表类型1，2代表类型2，本文用插槽实现。

使用elementPlus中的表格组件

在tempalte中书写格式

核心代码：

        <el-table-column
            prop="type_name"
            label="type_name"
            min-width="20%"
          >
          <template v-slot="scope">
		       <div>{{get_type_name(scope.row.type)}}</div>
		  </template>
        </el-table-column>

使用插槽来实现，slot-scope会提示已废弃，直接使用v-slot=“scope”就可以。

template标签包裹内容不能直接写插值语法，需要拿div或其它元素包裹

get_type_name是方法，写在script方法区

let typeOption: any = reactive([]);

  getTableRows().then((res) => {
    typeOption = reactive(res);
  });



//插槽 显示 type的中文名
const get_type_name = (type:any) =>{
  const found = typeOption.find((item:any) => item.object_type_id === type);
      return found ? found.object_type_name : '暂无类型';
}

 至此，可以实现表格中显示typeid对应的名称。