一、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也是和后端一一对应