fix(table): wrong tag label style #134

vben
1 parent d9b58e46
Showing 3 changed files with 30 additions and 10 deletions
src/components/Table/src/hooks/useColumns.ts
src/components/Table/src/style/index.less
src/views/demo/table/CustomerCell.vue
@@ -40,12 +40,12 @@ function handleIndexColumn(
   getPaginationRef: ComputedRef<boolean | PaginationProps>,
   columns: BasicColumn[]
 ) {
-  const { showIndexColumn, indexColumnProps, ellipsis } = unref(propsRef);
+  const { showIndexColumn, indexColumnProps } = unref(propsRef);
  
   let pushIndexColumns = false;
   columns.forEach((item) => {
     const { children } = item;
-    handleItem(item, !!ellipsis);
+
     const isTreeTable = children && children.length;
  
     const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
@@ -114,6 +114,16 @@ export function useColumns(
     if (!columns) {
       return [];
     }
+    const { ellipsis } = unref(propsRef);
+
+    columns.forEach((item) => {
+      const { customRender, slots } = item;
+
+      handleItem(
+        item,
+        Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots
+      );
+    });
     return columns;
   });
  
@@ -24,20 +24,16 @@
     }
   }
  
-  &-img__preview {
-    display: flex;
-
-    img {
-      margin-right: 4px;
-    }
-  }
-
   &--inset {
     .ant-table-wrapper {
       padding: 0;
     }
   }
  
+  .ant-tag {
+    margin-right: 0;
+  }
+
   .ant-table-wrapper {
     padding: 8px;
     background: #fff;
@@ -10,6 +10,12 @@
           :imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
         />
       </template>
+
+      <template #category="{ record }">
+        <Tag color="green">
+          {{ record.no }}
+        </Tag>
+      </template>
     </BasicTable>
   </div>
 </template>
@@ -25,6 +31,13 @@
       slots: { customRender: 'id' },
     },
     {
+      title: '分类',
+      dataIndex: 'category',
+      width: 80,
+      align: 'center',
+      slots: { customRender: 'category' },
+    },
+    {
       title: '姓名',
       dataIndex: 'name',
       width: 120,
@@ -60,6 +73,7 @@
         title: '自定义列内容',
         api: demoListApi,
         columns: columns,
+        bordered: true,
       });
  
       return {