Merge pull request #149 from xiangshu233/main

BaseTableAction 新增 icon 配置项 + 表格斑马纹

src/components/Table/src/Table.vue

@@ -22,6 +22,17 @@
       <!--顶部右侧区域-->
       <slot name="toolbar"></slot>
 
+      <!--斑马纹-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="mr-2 table-toolbar-right-icon">
+            <n-switch v-model:value="isStriped" @update:value="setStriped" />
+          </div>
+        </template>
+        <span>表格斑马纹</span>
+      </n-tooltip>
+      <n-divider vertical />
+
       <!--刷新-->
       <n-tooltip trigger="hover">
         <template #trigger>
@@ -61,6 +72,7 @@
     <n-data-table
       ref="tableElRef"
       v-bind="getBindValues"
+      :striped="isStriped"
       :pagination="pagination"
       @update:page="updatePage"
       @update:page-size="updatePageSize"
@@ -144,7 +156,7 @@
       const tableElRef = ref<ComponentRef>(null);
       const wrapRef = ref<Nullable<HTMLDivElement>>(null);
       let paginationEl: HTMLElement | null;
-
+      const isStriped = ref(false);
       const tableData = ref<Recordable[]>([]);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
 
@@ -223,6 +235,8 @@
         innerPropsRef.value = { ...unref(innerPropsRef), ...props };
       }
 
+      const setStriped = (value: boolean) => (isStriped.value = value);
+
       const tableAction = {
         reload,
         setColumns,
@@ -288,6 +302,8 @@
         updatePageSize,
         pagination,
         tableAction,
+        setStriped,
+        isStriped,
       };
     },
   });

src/components/Table/src/components/TableAction.vue

@@ -2,7 +2,12 @@
   <div class="tableAction">
     <div class="flex items-center justify-center">
       <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-        <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
+        <n-button v-bind="action" class="mx-2">
+          {{ action.label }}
+          <template #icon v-if="action.hasOwnProperty('icon')">
+            <n-icon :component="action.icon" />
+          </template>
+        </n-button>
       </template>
       <n-dropdown
         v-if="dropDownActions && getDropdownList.length"

src/components/Table/src/props.ts

@@ -43,7 +43,7 @@ export const basicProps = {
   },
   pagination: {
     type: [Object, Boolean],
-    default: () => { },
+    default: () => {},
   },
   //废弃
   showPagination: {

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<InstanceType<typeof NButton>> {
   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;
 }

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;