AiList
基础用法
常规列表
<template>
<AiList
row-key="id"
ref="UserListEl"
:tab-config="tabConfig"
:list-model="userList"
:search-model="userSearchModel"
:list-config="userListConfig"
:search-config="userSearchConfig"
:action-Config="userActionConfig"
:settingConfig="userSettingConfig"
@search="handleUserSearch"
></AiList>
</template>
<script setup>
import { reactive, ref, watch, computed } from "vue";
const regionOptions = [
{
value: "cn",
label: "中国",
children: [
{ value: "bg", label: "北京" },
{ value: "sh", label: "上海" },
{ value: "sz", label: "深圳" },
{ value: "cq", label: "重庆" },
],
},
{
value: "en",
label: "英国",
children: [{ value: "lo", label: "伦敦" }],
},
{
value: "us",
label: "美国",
children: [
{ value: "ne", label: "纽约" },
{ value: "ja", label: "加利福利亚" },
{ value: "la", label: "洛杉矶" },
],
},
{
value: "jp",
label: "日本",
children: [
{ value: "to", label: "东京" },
{ value: "ky", label: "京都" },
{ value: "lv", label: "大阪" },
],
},
];
const roleOptions = [
{ dictKey: 1, dictLabel: "管理员" },
{ dictKey: 2, dictLabel: "研发" },
{ dictKey: 3, dictLabel: "产品" },
{ dictKey: 4, dictLabel: "运营" },
];
const statusOptions = [
{ dictKey: 1, dictLabel: "在线" },
{ dictKey: 2, dictLabel: "离线" },
{ dictKey: 3, dictLabel: "忙碌" },
{ dictKey: 4, dictLabel: "会议中" },
];
const tagList = [
{ dictLabel: "test", dictKey: "t" },
{ dictLabel: "标签1", dictKey: "t1" },
{ dictLabel: "标签2", dictKey: "t2" },
{ dictLabel: "标签3", dictKey: "t3" },
{ dictLabel: "标签4", dictKey: "t4" },
{ dictLabel: "标签5", dictKey: "t5" },
];
const tabConfig = reactive({
active: 1,
tabs: [{ label: "常规列表", key: 1 }],
});
const userList = [
{
id: 1,
image:
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
name: "yukino",
role: 1,
switch: true,
status: 1,
region: "cq",
tags: ["t1", "t2"],
createTime: "2026-08-01 00:00:00",
},
{
id: 2,
image:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "fufu",
role: 2,
switch: true,
status: 2,
region: "bg",
tags: ["t1", "t2"],
createTime: "2026-08-02 00:00:00",
},
{
id: 3,
image:
"https://yukino-luo.oss-cn-chengdu.aliyuncs.com/ai-vue-demo/1787381214057.jpg",
name: "二二",
role: 3,
switch: true,
status: 3,
region: "sh",
tags: ["t1", "t2", "t3", "t4"],
createTime: "",
},
{
id: 4,
image:
"https://yukino-luo.oss-cn-chengdu.aliyuncs.com/ai-vue-demo/1787381247936.jpg",
name: "三三",
role: 1,
switch: false,
status: 4,
region: "to",
tags: ["t", "t4"],
createTime: "",
},
{
id: 5,
image: "",
name: "小鸡毛",
role: 4,
switch: true,
status: 1,
region: "la",
tags: ["t1", "t2", "t3"],
createTime: "",
},
{
id: 6,
image: "",
name: "小白",
role: 4,
switch: true,
status: 1,
region: "cq",
tags: [],
createTime: "",
},
{
id: 7,
image: "",
name: "布布",
role: 4,
switch: true,
status: 1,
region: "ky",
tags: [],
createTime: "",
},
{
id: 8,
image: "",
name: "一二",
role: 4,
switch: true,
status: 1,
region: "lv",
tags: [],
createTime: "",
},
{
id: 9,
image: "",
name: "sakura",
role: 4,
switch: true,
status: 1,
region: "la",
tags: [],
createTime: "",
},
{
id: 10,
image: "",
name: "绘梨衣",
role: 4,
switch: true,
status: 1,
region: "sh",
tags: ["t3", "t4"],
createTime: "",
},
{
id: 11,
image: "",
name: "leach",
role: 4,
switch: true,
status: 1,
region: "sh",
tags: ["t"],
createTime: "",
},
];
const userSearchModel = reactive({
data: {
pageNum: 1,
pageSize: 10,
name: "",
role: "",
region: "",
status: "",
tags: [],
createTimeTmp: [],
createTimeStart: "",
createTimeEnd: "",
},
});
const userSearchConfig = computed(() => {
return [
{
key: "name",
label: "名称",
type: "input",
noneLabel: true,
width: 6,
model: "data.name",
},
{
key: "role",
label: "角色",
type: "select",
noneLabel: true,
width: 6,
model: "data.role",
dictList: roleOptions,
},
{
key: "status",
label: "状态",
type: "select",
noneLabel: true,
width: 6,
model: "data.status",
dictList: statusOptions,
},
{
key: "tags",
label: "标签",
type: "select",
width: 8,
multiple: true,
model: "data.tags",
more: true,
dictList: tagList,
},
{
key: "createTime",
label: "创建时间范围",
type: "date",
width: 16,
model: "data.createTimeTmp",
more: true,
dateType: "daterange",
endModel: "data.createTimeEnd",
startModel: "data.createTimeStart",
endPlaceholder: "结束时间",
startPlaceholder: "开始时间",
},
];
});
const userListConfig = computed(() => {
return [
{
key: "key",
head: "key",
width: 50,
type: "select",
fixed: "left",
multiple: true,
},
{
key: "image",
head: "头像",
width: 80,
type: "image",
model: "image",
radius: true,
},
{
key: "name",
head: "名称",
width: 100,
type: "text",
model: "name",
orderModel: "name",
},
{
key: "role",
head: "角色",
width: 100,
type: "enum",
model: "role",
orderModel: 'role',
dictList: roleOptions,
},
{
key: "region",
head: "归属地区",
width: 120,
type: "enum",
model: "region",
isTree: true,
dictKey: "value",
dictLabel: "label",
orderModel: 'region',
dictList: regionOptions,
},
{
key: "status",
head: "在线状态",
width: 120,
type: "status",
model: "status",
orderModel: 'status',
dictList: statusOptions,
color: (row) => {
if ([1, 2, 3, 4].includes(row.status)) {
return ["#1f9d68", "#d93f34", "#c97700", "#2a6af5"][row.status - 1];
}
},
},
{
key: "tags",
head: "标签",
width: 160,
type: "tags",
model: (row) => {
if (!row?.tags || !row?.tags.length) return [];
return row.tags.map((item) => {
return tagList.find((tag) => tag.dictKey == item)?.dictLabel ?? item;
});
},
},
{
key: "switch",
width: 120,
head: "启用状态",
type: "switch",
model: "switch",
orderModel: 'switch',
changeFun: (val, scope) => {
scope.row.switch = val;
},
},
{
key: "createTime",
head: "创建时间",
width: 160,
type: "text",
model: "createTime",
orderModel: "createTime",
},
{
key: "option",
head: "操作",
type: "option",
fixed: "right",
width: 160,
optionConfig: [
{
label: "查看",
icon: "View",
clickFun: async ({ row }) => {},
},
{
label: "编辑",
icon: "Edit",
clickFun: ({ row }) => {},
},
{
label: "执行",
icon: "SwitchButton",
clickFun: ({ row }) => {
},
},
{
label: "删除",
icon: "DeleteFilled",
clickFun: ({ row }) => {
},
},
],
},
];
});
const userActionConfig = computed(() => {
return [
{
key: "add",
icon: "CirclePlus",
label: "新增",
type: "primary",
left: true,
clickFun: () => {},
},
{
key: "import",
icon: "Upload",
label: "导入",
left: true,
clickFun: () => {},
},
{
key: "more",
label: "批量操作",
type: "primary",
left: false,
dropdown: true,
menuList: [
{ label: "action1", clickFun: () => {} },
{ label: "action2", clickFun: () => {} },
{ label: "action3", clickFun: () => {} },
{ label: "action4", clickFun: () => {} },
],
},
];
});
const userSettingConfig = reactive({
customKey: "test-list",
showColumnSetting: true,
});
const handleUserSearch = () => {
const title = "搜索条件";
const message = `${JSON.stringify(userSearchModel)}`;
};
</script>
<style lang="scss" scoped></style>可编辑列表
可编辑列表
<template>
<AiList
row-key="id"
ref="OrderListEl"
:tab-config="tabConfig"
:list-model="orderList"
:search-model="orderSearchModel"
:list-config="orderListConfig"
:search-config="orderSearchConfig"
:action-Config="orderActionConfig"
:settingConfig="orderSettingConfig"
@search="handleOrderSearch"
></AiList>
</template>
<script setup>
import { reactive, ref, watch, computed } from "vue";
const BillingSettlementStatus = [
{ dictKey: 1, dictLabel: '待结算' },
{ dictKey: 2, dictLabel: '结算中' },
{ dictKey: 3, dictLabel: '人工结算' },
{ dictKey: 4, dictLabel: '系统结算' }
]
const BillingConfirmationStatus = [
{ dictKey: 1, dictLabel: '待确认' },
{ dictKey: 2, dictLabel: '人工确认' },
{ dictKey: 3, dictLabel: '系统确认' }
]
const BillingPublishStatus = [
{ dictKey: 1, dictLabel: '待发布' },
{ dictKey: 2, dictLabel: '发布中' },
{ dictKey: 3, dictLabel: '已发布' },
{ dictKey: 99, dictLabel: '发布失败' }
]
const companyList = [
{ dictKey: '1', dictLabel: '企业A' },
{ dictKey: '2', dictLabel: '企业B' },
{ dictKey: '3', dictLabel: '企业C' },
{ dictKey: '4', dictLabel: '企业D' },
{ dictKey: '5', dictLabel: '企业E' },
{ dictKey: '6', dictLabel: '企业F' },
{ dictKey: '7', dictLabel: '企业G' },
{ dictKey: '8', dictLabel: '企业H' },
{ dictKey: '9', dictLabel: '企业I' },
{ dictKey: '10', dictLabel: '企业J' }
]
const CurrencyList = [
{ dictLabel: 'CNY', dictKey: 'CNY' },
{ dictLabel: 'USD', dictKey: 'USD' },
{ dictLabel: 'EUR', dictKey: 'EUR' }
]
const tabConfig = reactive({
active: 1,
tabs: [{ label: "可编辑列表", key: 1 }],
});
const orderList = [
{
billId: "202309010001",
companyName: "企业A",
companyId: "1",
billMonth: "2023-09",
billAmount: 1000,
payableAmount: 800,
settlementAmount: 700,
currency: "CNY",
publishStatus: 1,
confirmStatus: 2,
billPushStatus: 1,
settlementStatus: 3,
publishTime: "2023-09-01 10:00:00",
confirmTime: "2023-09-02 15:30:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010002",
companyName: "企业B",
companyId: "2",
billMonth: "2023-09",
billAmount: 1500,
payableAmount: 1200,
settlementAmount: 1100,
currency: "CNY",
publishStatus: 2,
confirmStatus: 1,
billPushStatus: 2,
settlementStatus: 2,
publishTime: "2023-09-01 11:00:00",
confirmTime: "2023-09-02 16:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010003",
companyName: "企业C",
companyId: "3",
billMonth: "2023-09",
billAmount: 2000,
payableAmount: 1800,
settlementAmount: 1700,
currency: "CNY",
publishStatus: 3,
confirmStatus: 3,
billPushStatus: 3,
settlementStatus: 1,
publishTime: "2023-09-01 12:00:00",
confirmTime: "2023-09-02 17:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010004",
companyName: "企业D",
companyId: "4",
billMonth: "2023-09",
billAmount: 2500,
payableAmount: 2200,
settlementAmount: 2100,
currency: "USD",
publishStatus: 1,
confirmStatus: 2,
billPushStatus: 1,
settlementStatus: 3,
publishTime: "2023-09-01 13:00:00",
confirmTime: "2023-09-02 18:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010005",
companyName: "企业E",
companyId: "5",
billMonth: "2023-09",
billAmount: 3000,
payableAmount: 2800,
settlementAmount: 2700,
currency: "EUR",
publishStatus: 2,
confirmStatus: 1,
billPushStatus: 2,
settlementStatus: 2,
publishTime: "2023-09-01 14:00:00",
confirmTime: "2023-09-02 19:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010006",
companyName: "企业F",
companyId: "6",
billMonth: "2023-09",
billAmount: 3500,
payableAmount: 3200,
settlementAmount: 3100,
currency: "CNY",
publishStatus: 3,
confirmStatus: 3,
billPushStatus: 3,
settlementStatus: 1,
publishTime: "2023-09-01 15:00:00",
confirmTime: "2023-09-02 20:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010007",
companyName: "企业G",
companyId: "7",
billMonth: "2023-09",
billAmount: 4000,
payableAmount: 3800,
settlementAmount: 3700,
currency: "USD",
publishStatus: 1,
confirmStatus: 2,
billPushStatus: 1,
settlementStatus: 3,
publishTime: "2023-09-01 16:00:00",
confirmTime: "2023-09-02 21:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010008",
companyName: "企业H",
companyId: "8",
billMonth: "2023-09",
billAmount: 4500,
payableAmount: 4200,
settlementAmount: 4100,
currency: "EUR",
publishStatus: 2,
confirmStatus: 1,
billPushStatus: 2,
settlementStatus: 2,
publishTime: "2023-09-01 17:00:00",
confirmTime: "2023-09-02 22:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010009",
companyName: "企业I",
companyId: "9",
billMonth: "2023-09",
billAmount: 5000,
payableAmount: 4800,
settlementAmount: 4700,
currency: "CNY",
publishStatus: 3,
confirmStatus: 3,
billPushStatus: 3,
settlementStatus: 1,
publishTime: "2023-09-01 18:00:00",
confirmTime: "2023-09-02 23:00:00",
billDueTime: "2023-09-30",
},
{
billId: "202309010010",
companyName: "企业J",
companyId: "10",
billMonth: "2023-09",
billAmount: 5500,
payableAmount: 5200,
settlementAmount: 5100,
currency: "USD",
publishStatus: 1,
confirmStatus: 2,
billPushStatus: 1,
settlementStatus: 3,
publishTime: "2023-09-01 19:00:00",
confirmTime: "2023-09-03 00:00:00",
billDueTime: "2023-09-30",
},
];
const orderSearchModel = reactive({
data: {
pageNum: 1,
pageSize: 10,
billMonth: "",
billId: "",
companyId: "",
publishStatus: "",
billPushStatus: "",
confirmStatus: "",
settlementStatus: "",
companyId: "",
},
});
const orderListConfig = computed(() => {
return [
{
key: "select",
width: "50",
type: "select",
multiple: true,
selectable: (row, index) => {
if (!row) {
return false;
}
return row?.publishStatus !== 1;
},
fixed: "left",
},
{
key: "id",
head: "账单ID",
width: 150,
type: "text",
model: "billId",
orderModel: "bill_id",
fixed: "left",
},
{
key: "companyName",
head: "归属企业",
width: 120,
type: "edit",
orderModel: "company_id",
readOption: {
type: "enum",
model: "companyId",
dictList: companyList,
},
editOption: {
type: "select",
model: "companyId",
required: true,
dictList: companyList,
prop: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.companyId`;
},
changeFun: (val, scope, done) => {
done();
},
},
},
{
key: "month",
head: "账单月份",
width: 160,
type: "edit",
orderModel: "bill_month",
readOption: {
type: "text",
model: "billMonth",
},
editOption: {
type: "date",
model: "billMonth",
dateType: "month",
valueFormat: "YYYY-MM",
required: true,
prop: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.billMonth`;
},
changeFun: (val, scope, done) => {
done();
},
},
},
{
key: "billAmount",
head: "账单金额",
type: "edit",
width: 160,
orderModel: "bill_amount",
readOption: {
type: "price",
model: "billAmount",
currency: "currency",
},
editOption: {
type: "input-select",
model: "billAmount",
required: true,
appendModel: "currency",
dictList: CurrencyList,
prop: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.billAmount`;
},
appendProp: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.currency`;
},
changeFun: (val, scope, done) => {
done();
},
},
},
{
key: "payableAmount",
head: "应付金额",
type: "edit",
width: 160,
orderModel: "payable_amount",
readOption: {
type: "price",
model: "payableAmount",
currency: "currency",
},
editOption: {
type: "input-select",
model: "payableAmount",
required: true,
appendModel: "currency",
dictList: CurrencyList,
prop: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.payableAmount`;
},
appendProp: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.currency`;
},
changeFun: (val, scope, done) => {
done();
},
},
},
{
key: "settlementAmount",
head: "结算金额",
type: "edit",
width: 160,
orderModel: "settlement_amount",
readOption: {
type: "price",
model: "settlementAmount",
currency: "currency",
},
editOption: {
type: "input-select",
model: "settlementAmount",
required: true,
appendModel: "currency",
dictList: CurrencyList,
prop: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.settlementAmount`;
},
appendProp: (row) => {
const index = orderList.findIndex(
(item) => item.billId === row.billId,
);
return `${index}.currency`;
},
changeFun: (val, scope, done) => {
done();
},
},
},
{
key: "publishStatus",
head: "发布状态",
width: 120,
type: "status",
model: "publishStatus",
orderModel: "publish_status",
dictList: BillingPublishStatus,
color: (row) => {
if ([1, 2, 3].includes(row.publishStatus)) {
return ["#d93f34", "#c97700", "#1f9d68"][row.publishStatus - 1];
}
},
},
{
key: "confirmStatus",
head: "确认状态",
width: 120,
type: "status",
model: "confirmStatus",
orderModel: "confirm_status",
dictList: BillingConfirmationStatus,
color: (row) => {
if ([1, 2, 3].includes(row.confirmStatus)) {
return ["#d93f34", "#1f9d68", "#2a6af5"][row.confirmStatus - 1];
}
},
},
{
key: "settlementStatus",
head: "结算状态",
width: 120,
type: "status",
model: "settlementStatus",
orderModel: "settlement_status",
dictList: BillingSettlementStatus,
color: (row) => {
if ([1, 2, 3, 4].includes(row.settlementStatus)) {
return ["#d93f34", "#c97700", "#1f9d68", "#1f9d68"][
row.settlementStatus - 1
];
}
},
},
{
key: "publishTime",
head: "发布时间",
width: 180,
type: "text",
orderModel: "publish_time",
model: "publishTime",
},
{
key: "confirmTime",
head: "确认完成时间",
width: 180,
type: "text",
orderModel: "confirm_time",
model: "confirmTime",
},
{
key: "billDueTime",
head: "账单到期时间",
width: 180,
type: "text",
orderModel: "bill_due_time",
model: "billDueTime",
},
{
key: "option",
head: "操作",
width: 180,
type: "option",
fixed: "right",
optionConfig: [
{
label: "查看",
icon: "View",
showFun: ({ row }) => !row?.isEdit,
clickFun: ({ row }) => {
showOrderInfo.value = true;
orderPageType.value = "view";
orderInfo.value = row;
},
},
{
label: "调账",
icon: "EditPen",
showFun: ({ row }) => !row?.isEdit,
clickFun: ({ row }) => {
row._copyData = {};
Object.keys(row).forEach((key) => {
if (key !== "_copyData") {
row._copyData[key] = row[key];
}
});
row.isEdit = true;
},
},
{
label: "保存",
icon: "SuccessFilled",
color: "#1f9d68",
showFun: ({ row }) => row?.isEdit,
clickFun: ({ row, FormEl }) => {
FormEl.validate((res) => {
if (res) {
row.isEdit = false;
}
});
},
},
{
label: "取消",
icon: "CircleCloseFilled",
color: "#c97700",
showFun: ({ row }) => row?.isEdit,
clickFun: ({ row }) => {
Object.keys(row).forEach((key) => {
if (key !== "_copyData") {
row[key] = row._copyData[key];
}
});
row.isEdit = false;
},
},
{
label: "发布",
icon: "Promotion",
showFun: ({ row }) => row.publishStatus === 1 && !row?.isEdit,
clickFun: ({ row }) => {
// 发布
},
},
{
label: "导出",
icon: "Download",
showFun: ({ row }) => !row?.isEdit,
clickFun: ({ row }) => {
// 导出
},
},
],
},
];
});
const orderSearchConfig = computed(() => {
return [
{
label: "账单月份",
type: "date",
noneLabel: true,
width: 6,
dateType: "month",
model: "data.billMonth",
valueFormat: "YYYY-MM",
},
{
label: "账单编号",
type: "input",
noneLabel: true,
width: 6,
model: "data.billId",
},
{
label: "归属企业",
type: "select",
noneLabel: true,
width: 6,
model: "data.companyId",
dictList: companyList,
},
{
label: "发布状态",
type: "select",
more: true,
width: 8,
model: "data.publishStatus",
dictList: BillingPublishStatus,
},
{
label: "确认状态",
type: "select",
more: true,
width: 8,
model: "data.confirmStatus",
dictList: BillingConfirmationStatus,
},
{
label: "结算状态",
type: "select",
more: true,
width: 8,
model: "data.settlementStatus",
dictList: BillingSettlementStatus,
},
{
label: "币种",
type: "select",
more: true,
width: 8,
model: "data.currency",
dictList: CurrencyList,
},
];
});
const orderActionConfig = computed(() => {
return [
{
key: "add",
icon: "CirclePlus",
label: "新增",
type: "primary",
left: true,
clickFun: () => {
showOrderInfo.value = true;
orderPageType.value = "add";
orderInfo.value = {};
},
},
{
key: "import",
icon: "Upload",
label: "导入",
left: true,
clickFun: () => {},
},
{
key: "more",
label: "批量操作",
type: "primary",
left: false,
dropdown: true,
menuList: [
{ label: "action1", clickFun: () => {} },
{ label: "action2", clickFun: () => {} },
{ label: "action3", clickFun: () => {} },
{ label: "action4", clickFun: () => {} },
],
},
];
});
const orderSettingConfig = reactive({
customKey: "test-list-2",
showColumnSetting: true,
});
const handleOrderSearch = (searchModel) => {
const title = "搜索条件";
const message = `${JSON.stringify(orderSearchModel)}`;
};
</script>
<style lang="scss" scoped></style>异步列表
异步列表
<template>
<AiList
row-key="id"
ref="GoodsListEl"
:tab-config="tabConfig"
:list-model="'list'"
:search-url="'/goods/list'"
:search-model="goodsSearchModel"
:list-config="goodsListConfig"
:search-config="goodsSearchConfig"
:settingConfig="goodsSettingConfig"
></AiList>
</template>
<script setup>
import { reactive, ref, watch, inject, computed } from "vue";
const CurrencyList = [
{ dictLabel: 'CNY', dictKey: 'CNY' },
{ dictLabel: 'USD', dictKey: 'USD' },
{ dictLabel: 'EUR', dictKey: 'EUR' }
]
const statusOptions = [
{ dictKey: 0, dictLabel: '下架' },
{ dictKey: 1, dictLabel: '上架' }
]
const tabConfig = reactive({
active: 1,
tabs: [{ label: "异步列表", key: 1 }],
});
const GoodsListEl = ref();
const { apiHttp } = inject("$global");
const goodsSearchModel = reactive({
data: {
pageNum: 1,
pageSize: 10,
id: "",
name: "",
currency: "",
status: "",
createdAtTemp: [],
createdAtStart: "",
createdAtEnd: "",
},
});
const goodsSearchConfig = computed(() => {
return [
{
key: "id",
label: "ID",
type: "input",
noneLabel: true,
width: 6,
model: "data.id",
},
{
key: "name",
label: "名称",
type: "input",
noneLabel: true,
width: 6,
model: "data.name",
},
{
key: "currency",
label: "币种",
type: "select",
noneLabel: true,
width: 6,
model: "data.currency",
dictList: CurrencyList,
},
{
key: "status",
label: "状态",
type: "select",
width: 8,
model: "data.status",
more: true,
dictList: statusOptions,
},
{
key: "createTime",
label: "创建时间范围",
type: "date",
width: 16,
model: "data.createdAtTemp",
more: true,
dateType: "daterange",
endModel: "data.createdAtEnd",
startModel: "data.createdAtStart",
endPlaceholder: "结束时间",
startPlaceholder: "开始时间",
},
];
});
const goodsListConfig = computed(() => {
return [
{
key: "id",
head: "ID",
width: 50,
type: "text",
model: "id",
orderModel: "id",
fixed: "left",
multiple: true,
},
{
key: "image",
head: "商品图片",
width: 100,
type: "image",
model: "image",
},
{
key: "name",
head: "商品名称",
type: "text",
model: "name",
orderModel: "name",
},
{
key: "originalPrice",
head: "原价",
width: 100,
type: "price",
model: "originalPrice",
orderModel: "originalPrice",
currency: "currency",
},
{
key: "currentPrice",
head: "现价",
width: 100,
type: "price",
model: "currentPrice",
orderModel: "currentPrice",
currency: "currency",
},
{
key: "totalInventory",
head: "总库存",
width: 100,
type: "text",
model: "totalInventory",
orderModel: "totalInventory",
},
{
key: "currentInventory",
head: "剩余库存",
width: 120,
type: "text",
model: "currentInventory",
orderModel: "currentInventory",
},
{
key: "monthSales",
head: "月销量",
width: 100,
type: "text",
model: "monthSales",
orderModel: "monthSales",
},
{
key: "status",
head: "在线状态",
width: 120,
type: "status",
model: "status",
orderModel: "status",
dictList: statusOptions,
color: (row) => {
if ([0, 1].includes(row.status)) {
return ["#d93f34", "#1f9d68"][row.status];
}
},
},
{
key: "createdAt",
head: "创建时间",
width: 180,
type: "text",
model: "createdAt",
orderModel: "createdAt",
},
{
key: "option",
head: "操作",
type: "option",
fixed: "right",
width: 160,
optionConfig: [
{
label: "查看",
icon: "View",
clickFun: async ({ row }) => {
},
},
{
label: "编辑",
icon: "Edit",
clickFun: ({ row }) => {
},
},
{
label: "删除",
icon: "DeleteFilled",
clickFun: ({ row }) => {
},
},
],
},
];
});
const goodsSettingConfig = reactive({
customKey: "test-list3",
showColumnSetting: true,
});
const handleGoodsRefresh = () => {
GoodsListEl.value?.search();
};
</script>
<style lang="scss" scoped></style>Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| rowKey | 行数据的Key | Function/string | id |
| searchUrl | 获取列表数据的接口地址，静态模式可以不填 | string | - |
| searchMethods | 获取列表数据的请求方式，静态模式可以不填 | string | post |
| listModel | 静态模式下为列表数据，动态模式下为数据的属性名，也可以是属性的路径 | array/string | - |
| searchModel | 查询参数 | object | {} |
| showPagination | 是否分页 | boolean | true |
| selectData | 多选框勾选的数据 | array | [] |
| tableHeight | 表格高度 | string | - |
| initSearch | 首次查询前初始时调用，返回Promise | Function | - |
| beforeSearch | 每次查询前调用 | Function | - |
| afterSearch | 每次查询后调用 | string | - |
| tabConfig | 顶部tab配置 参考 | object | - |
| actionConfig | 按钮区域配置 参考 | array | - |
| searchConfig | 筛选区域配置 参考 | array | - |
| settingConfig | 列表设置配置 参考 | object | - |
| treeSelectConfig | 左侧树结构查询配置 参考 | object | - |
| listConfig | 列表区域配置 参考 | array | - |
Expose
| 方法 | 说明 |
|---|---|
| search | 列表刷新 |
| tableData | 列表数据 |
| selection | 选中数据 |
| resetData | 重置列表 |
| extendData | 列表额外数据 |
Event
| 事件 | 说明 |
|---|---|
| search | 列表刷新 |
| change-tab | 切换Tab |
| selection-change | 选中数据变化 |
| row-dblclick | 行数据双击 |
| column-keys-change | 列表配置变化 |