vue3 table表格单元格过滤数据

1、需求。后台返回枚举数据code，前端显示对应名称message

2、使用对象属性获取值的方法

// html
<table-box
  :columns="state.columns"
  :dataSource="state.tableData"
  :pagination="pagination"
  :rowSelection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }"
  @change="handleTableChange"
  :loading="loading"
>
  <template #direction="{ record }">
    {{ lableObj[record.direction] }}
  </template>
</table-box>

// setup
const state = reactive({
  tableData: [],
  columns: [
    {
      title: "标签编码",
      key: "labelCode",
      dataIndex: "labelCode",
      ellipsis: true,
    },
    {
      title: "标签名称",
      key: "labelName",
      dataIndex: "labelName",
      ellipsis: true,
    },
    {
      title: "标签数据类型",
      key: "dataType",
      dataIndex: "dataType",
      ellipsis: true,
    },
    {
      title: "标签数据单位",
      key: "unit",
      dataIndex: "unit",
      ellipsis: true,
    },
    {
      title: "标签类型",
      key: "direction",
      slots: {
        customRender: "direction"
      },
      ellipsis: true,
    },
    {
      title: "备注",
      key: "remark",
      dataIndex: "remark",
      ellipsis: true,
    },
  ],
  labelIdList: [],
});
let lableObj = ref({});
// 获取表格数据
const getTableData = async (formData = {}, list) => {
  if(props.labelTypeList && props.labelTypeList.length) { // 包装成对象，用于表格过滤
    props.labelTypeList.forEach(i => {
      lableObj.value[i.code] = i.message;
    })
  }
  loading.value = true;
  state.labelIdList = list;
  let res = await request(url.GET_RELATION_LABEL_LIST, "get", {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    labelIdList: list,
    ...formData,
  }).finally(() => {
    loading.value = false;
  });
  loading.value = false;
  pagination.total = res.total;
  state.tableData = res.rows;
  if (res.rows.length) {
    res.rows.map((i) => {
      if (i.check) {
        selectedRowKeys.value.push(i.id);
      }
    });
  }
};

3、尝试过computed、方法调用、h函数、v-html 和 v-text 均未成功渲染，如果有大佬们有更好的办法，请不吝赐教喔！

忘了是怎么开始了…