fix bug #22 表格列默认开启 ellipsis 属性

package.json

@@ -38,7 +38,7 @@
     "makeit-captcha": "^1.2.5",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.16.0",
+    "naive-ui": "^2.16.1",
     "pinia": "^2.0.0-beta.3",
     "qs": "^6.10.1",
     "vfonts": "^0.1.0",

src/components/Table/src/Table.vue

@@ -233,9 +233,6 @@
         getCacheColumns,
         setCacheColumnsField,
         emit,
-        getSize: () => {
-          return unref(getBindValues).size;
-        },
       };
 
       const getCanResize = computed(() => {
@@ -288,7 +285,6 @@
         densitySelect,
         updatePage,
         updatePageSize,
-        updateCheckedRowKeys,
         pagination,
         tableAction,
       };

src/components/Table/src/hooks/useColumns.ts

@@ -52,6 +52,8 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
         return hasPermission(column.auth) && isIfShow(column);
       })
       .map((column) => {
+        //默认 ellipsis 为true
+        column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
         const { edit } = column;
         if (edit) {
           column.render = renderEditCell(column);

src/layout/components/Menu/index.vue

@@ -40,7 +40,8 @@
         default: 'left',
       },
     },
-    setup(props) {
+    emits: ['update:collapsed'],
+    setup(props, { emit }) {
       // 当前路由
       const currentRoute = useRoute();
       const router = useRouter();
@@ -72,6 +73,9 @@
         () => settingStore.menuSetting.mixMenu,
         () => {
           updateMenu();
+          if (props.collapsed) {
+            emit('update:collapsed', !props.collapsed);
+          }
         }
       );
 

src/views/comp/table/CellColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -22,6 +24,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -47,29 +50,33 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     edit: true,
-    width: 250,
+    width: 160,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 160,
   },
 ];

src/views/comp/table/basic.vue

@@ -8,6 +8,7 @@
       :row-key="(row) => row.id"
       ref="actionRef"
       :actionColumn="actionColumn"
+      :scroll-x="1360"
       @update:checked-row-keys="onCheckedRow"
     >
       <template #toolbar>

src/views/comp/table/basicColumns.ts

@@ -5,19 +5,22 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
     key: 'name',
-    width: 200,
+    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -28,21 +31,22 @@ export const columns = [
   {
     title: '地址',
     key: 'address',
-    width: 200,
+    width: 150,
   },
   {
     title: '开始日期',
     key: 'beginTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
     key: 'status',
+    width: 100,
     render(row) {
       return h(
         NTag,
@@ -58,9 +62,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 160,
   },
 ];

src/views/comp/table/editCell.vue

@@ -7,10 +7,10 @@
       :request="loadDataTable"
       :row-key="(row) => row.id"
       ref="actionRef"
-      :actionColumn="actionColumn"
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1300"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -35,19 +35,6 @@
           pageSize: 5,
           name: 'xiaoMa',
         },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
       });
 
       function handleEdit(record) {

src/views/comp/table/editRow.vue

@@ -11,6 +11,7 @@
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1530"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>

src/views/comp/table/rowColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -23,6 +25,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -49,23 +52,25 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     editRow: true,
     edit: true,
-    width: 250,
+    width: 160,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
@@ -81,9 +86,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 160,
   },
 ];

src/views/list/basicList/columns.ts

@@ -5,14 +5,17 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '名称',
     key: 'name',
+    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -27,48 +30,21 @@ export const columns = [
     ifShow: (_column) => {
       return true; // 根据业务控制是否显示
     },
+    width: 150,
   },
   {
     title: '开始日期',
     key: 'beginTime',
+    width: 160,
   },
   {
     title: '结束日期',
     key: 'endTime',
+    width: 160,
   },
   {
     title: '创建时间',
     key: 'date',
+    width: 100,
   },
-  // {
-  //     title: '操作',
-  //     key: 'actions',
-  //     width: 150,
-  //     //简单写一下例子，不建议这么写，过段时间，这里封二次封装
-  //     render() {
-  //         return [
-  //             h(
-  //                 NButton,
-  //                 {
-  //                     size: 'small',
-  //                     type: 'error',
-  //                     style: 'margin-right:10px',
-  //                     onClick: () => {
-  //                     }
-  //                 },
-  //                 { default: () => '删除' }
-  //             ),
-  //             h(
-  //                 NButton,
-  //                 {
-  //                     size: 'small',
-  //                     onClick: () => {
-  //
-  //                     }
-  //                 },
-  //                 { default: () => '编辑' }
-  //             )
-  //         ]
-  //     }
-  // }
 ];

src/views/list/basicList/index.vue

@@ -13,6 +13,7 @@
       ref="actionRef"
       :actionColumn="actionColumn"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1090"
     >
       <template #tableTitle>
         <n-button type="primary" @click="addTable">
@@ -230,7 +231,7 @@
           name: 'xiaoMa',
         },
         actionColumn: {
-          width: 250,
+          width: 220,
           title: '操作',
           key: 'action',
           fixed: 'right',

tsconfig.json

@@ -16,18 +16,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "experimentalDecorators": true,
-    "lib": [
+    "lib": ["dom", "esnext"],
-      "dom",
+    "types": ["vite/client", "jest"],
-      "esnext"
+    "typeRoots": ["./node_modules/@types/", "./types"],
-    ],
-    "types": [
-      "vite/client",
-      "jest"
-    ],
-    "typeRoots": [
-      "./node_modules/@types/",
-      "./types"
-    ],
     "noImplicitAny": false,
     "skipLibCheck": true,
     "paths": {
@@ -40,7 +31,6 @@
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "types/*.ts",
     "types/**/*.d.ts",
     "types/**/*.ts",
     "build/**/*.ts",
@@ -48,9 +38,5 @@
     "mock/**/*.ts",
     "vite.config.ts"
   ],
-  "exclude": [
+  "exclude": ["node_modules", "dist", "**/*.js"]
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ]
 }

yarn.lock

@@ -4999,10 +4999,10 @@ mute-stream@0.0.7:
   resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-naive-ui@^2.16.0:
+naive-ui@^2.16.1:
-  version "2.16.0"
+  version "2.16.1"
-  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.16.0.tgz#42d8b6120ab061e46a316ac074c5b788139cd744"
+  resolved "https://registry.yarnpkg.com/naive-ui/-/naive-ui-2.16.1.tgz#0599e6748f498ad8f4f2f4c6c0637c1f1d860827"
-  integrity sha1-Qti2EgqwYeRqMWrAdMW3iBOc10Q=
+  integrity sha512-ku7ZxxBMp2fHD2eKV1gUDO6LmvMPUKYx0JzgtiCHRC8B88t4Ch5Momf+CfuYIM5NeVexzcmlahadslB74Bgbfw==
   dependencies:
     "@css-render/plugin-bem" "^0.15.4"
     "@css-render/vue3-ssr" "^0.15.4"