fix(table): fix table row misalignment close #353

Author: anncwb

package.json

@@ -1,6 +1,11 @@
 {
   "name": "vben-admin",
   "version": "2.0.3",
+  "author": {
+    "name": "vben",
+    "email": "anncwb@126.com",
+    "url": "https://github.com/anncwb"
+  },
   "scripts": {
     "bootstrap": "yarn install",
     "serve": "npx --max_old_space_size=4096 vite",
@@ -28,7 +33,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
-    "@vueuse/core": "^4.3.4",
+    "@vueuse/core": "^4.3.5",
     "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "2.0.1",
     "apexcharts": "^3.25.0",
@@ -91,6 +96,7 @@
     "is-ci": "^3.0.0",
     "less": "^4.1.1",
     "lint-staged": "^10.5.4",
+    "madge": "^4.0.2",
     "postcss": "^8.2.8",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
@@ -106,7 +112,7 @@
     "vite-plugin-compression": "^0.2.3",
     "vite-plugin-html": "^2.0.3",
     "vite-plugin-imagemin": "^0.2.9",
-    "vite-plugin-mock": "^2.2.3",
+    "vite-plugin-mock": "^2.2.4",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.8.1",
@@ -120,7 +126,7 @@
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
     "esbuild": "0.8.57",
-    "rollup": "2.41.0"
+    "rollup": "2.41.1"
   },
   "repository": {
     "type": "git",

src/components/Button/src/BasicButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
+  <Button v-bind="getBindValue" :class="[getColor, $attrs.class]" @click="onClick">
     <template #default="data">
       <Icon :icon="preIcon" v-if="preIcon" :size="14" />
       <slot v-bind="data"></slot>
@@ -26,6 +26,7 @@
       disabled: propTypes.bool,
       preIcon: propTypes.string,
       postIcon: propTypes.string,
+      onClick: propTypes.func,
     },
     setup(props, { attrs }) {
       const getColor = computed(() => {

src/components/Table/index.ts

@@ -1,10 +1,7 @@
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
 export { default as BasicTable } from './src/BasicTable.vue';
 export { default as TableAction } from './src/components/TableAction.vue';
 export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue';
-
-export const TableImg = createAsyncComponent(() => import('./src/components/TableImg.vue'));
+export { default as TableImg } from './src/components/TableImg.vue';
 
 export * from './src/types/table';
 export * from './src/types/pagination';

src/components/Table/src/components/TableImg.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="prefixCls" v-if="imgList && imgList.length">
+  <div
+    :class="prefixCls"
+    class="flex mx-auto items-center"
+    v-if="imgList && imgList.length"
+    :style="getWrapStyle"
+  >
     <PreviewGroup>
       <template v-for="img in imgList" :key="img">
         <Image :width="size" :src="img" />
@@ -8,36 +13,38 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { Image } from 'ant-design-vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'TableImage',
     components: { Image, PreviewGroup: Image.PreviewGroup },
     props: {
-      imgList: {
-        type: Array as PropType<string[]>,
-        default: null,
-      },
-      size: {
-        type: Number as PropType<number>,
-        default: 40,
-      },
+      imgList: propTypes.arrayOf(propTypes.string),
+      size: propTypes.number.def(40),
     },
-    setup() {
+    setup(props) {
+      const getWrapStyle = computed(
+        (): CSSProperties => {
+          const { size } = props;
+          const wh = `${size}px`;
+          return { height: wh, width: wh };
+        }
+      );
+
       const { prefixCls } = useDesign('basic-table-img');
-      return { prefixCls };
+      return { prefixCls, getWrapStyle };
     },
   });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-img';
 
   .@{prefix-cls} {
-    display: flex;
-
     .ant-image {
       margin-right: 4px;
       cursor: zoom-in;