- {{ action.label }}
+
+ {{ action.label }}
+
+
+
+
{ },
+ default: () => {},
},
//废弃
showPagination: {
diff --git a/src/components/Table/src/types/tableAction.ts b/src/components/Table/src/types/tableAction.ts
index 6452e02..27d483f 100644
--- a/src/components/Table/src/types/tableAction.ts
+++ b/src/components/Table/src/types/tableAction.ts
@@ -1,10 +1,13 @@
import { NButton } from 'naive-ui';
+import type { Component } from 'vue';
import { PermissionsEnum } from '@/enums/permissionsEnum';
export interface ActionItem extends Partial> {
onClick?: Fn;
label?: string;
- color?: 'success' | 'error' | 'warning';
- icon?: string;
+ type?: 'success' | 'error' | 'warning' | 'info' | 'primary' | 'default';
+ // 设定 color 后会覆盖 type 的样式
+ color?: string;
+ icon?: Component;
popConfirm?: PopConfirm;
disabled?: boolean;
divider?: boolean;
@@ -20,5 +23,5 @@ export interface PopConfirm {
cancelText?: string;
confirm: Fn;
cancel?: Fn;
- icon?: string;
+ icon?: Component;
}
diff --git a/src/views/comp/table/basic.vue b/src/views/comp/table/basic.vue
index 4750cf3..46bcbdd 100644
--- a/src/views/comp/table/basic.vue
+++ b/src/views/comp/table/basic.vue
@@ -24,6 +24,7 @@
import { getTableList } from '@/api/table/list';
import { columns } from './basicColumns';
import { useDialog, useMessage } from 'naive-ui';
+ import { DeleteOutlined, EditOutlined } from '@vicons/antd';
const message = useMessage();
const dialog = useDialog();
@@ -41,8 +42,8 @@
fixed: 'right',
align: 'center',
render(record) {
- return h(TableAction, {
- style: 'button',
+ return h(TableAction as any, {
+ style: 'text',
actions: createActions(record),
});
},
@@ -52,7 +53,10 @@
return [
{
label: '删除',
- icon: 'ic:outline-delete-outline',
+ type: 'error',
+ // 配置 color 会覆盖 type
+ color: 'red',
+ icon: DeleteOutlined,
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
@@ -63,6 +67,8 @@
},
{
label: '编辑',
+ type: 'primary',
+ icon: EditOutlined,
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;