如何解决后端数据状态值的解析并渲染

一、a-table中定义各个列表属性

<a-table :columns="columns">

</table>

    //定义列表
    const columns = [
    { title: "数据源名称", dataIndex: "datasourceName"},
    { title: "数据库类型", dataIndex: "databaseType"},
    { title: "数据源描述", dataIndex: "datasourceDescription"},
    { title: "连接信息", dataIndex: "connectionInfo"},
    { title: "应用状态", dataIndex: "datasourceStatus"},
    { title: "更新时间", dataIndex: "updateTime"},
    { title: "操作", dataIndex: "methods"},
    // 添加更多列...
  ];

获取数据并渲染到table的逻辑自行添加（简单）

二、解析状态

获取到数据后，状态传过来的数据为0、1、2，其中0代表未发布，1代表已发布，2代表已停用

注意：根据后端情况而定

1.解析状态

1.定义插槽

<template #datasourceStatus="{ record }">
  {{ getDatasourceStatusText(record.datasourceStatus) }}
</template>

这里是一个 Vue.js 的模板片段，它定义了一个名为 datasourceStatus 的插槽，并传入了一个参数 record。在这个模板中，使用了 getDatasourceStatusText 方法来根据 record.datasourceStatus 的值获取相应的状态文字描述。

2.根据状态值返回相应文字

const getDatasourceStatusText = (state) => {
  switch(state){
    case 0:
      return '未发布';
    case 1:
      return '已发布';
    case 2:
      return '已停用';
    default:
      return ''; // 可以添加一个默认返回值，表示未知状态
  }
};

这段代码定义了一个函数 getDatasourceStatusText，它接收一个状态值 state 作为参数，并根据不同的状态值返回相应的文字描述。具体来说：

• 当状态值为 0 时，返回 '未发布'。
• 当状态值为 1 时，返回 '已发布'。
• 当状态值为 2 时，返回 '已停用'。
• 如果状态值不在上述范围内，则返回空字符串，这里可以视为未知状态的处理，确保程序不会出现意外情况。

3.列表中定义一个自定义渲染器

加入slots: { customRender: "datasourceStatus" }

    //定义列表
    const columns = [
    { title: "数据源名称", dataIndex: "datasourceName"},
    { title: "数据库类型", dataIndex: "databaseType"},
    { title: "数据源描述", dataIndex: "datasourceDescription"},
    { title: "连接信息", dataIndex: "connectionInfo"},
    { title: "应用状态", dataIndex: "datasourceStatus",slots: { customRender: "datasourceStatus" }},
    { title: "更新时间", dataIndex: "updateTime"},
    { title: "操作", dataIndex: "methods"},
    // 添加更多列...
  ];

4.效果

当我解构record后datasourceStatus也是和后端一一对应