fix(table): wrong tag label style #134
This commit is contained in:
parent
d9b58e46ae
commit
e09e0a1253
|
|
@ -40,12 +40,12 @@ function handleIndexColumn(
|
||||||
getPaginationRef: ComputedRef<boolean | PaginationProps>,
|
getPaginationRef: ComputedRef<boolean | PaginationProps>,
|
||||||
columns: BasicColumn[]
|
columns: BasicColumn[]
|
||||||
) {
|
) {
|
||||||
const { showIndexColumn, indexColumnProps, ellipsis } = unref(propsRef);
|
const { showIndexColumn, indexColumnProps } = unref(propsRef);
|
||||||
|
|
||||||
let pushIndexColumns = false;
|
let pushIndexColumns = false;
|
||||||
columns.forEach((item) => {
|
columns.forEach((item) => {
|
||||||
const { children } = item;
|
const { children } = item;
|
||||||
handleItem(item, !!ellipsis);
|
|
||||||
const isTreeTable = children && children.length;
|
const isTreeTable = children && children.length;
|
||||||
|
|
||||||
const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
|
const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
|
||||||
|
|
@ -114,6 +114,16 @@ export function useColumns(
|
||||||
if (!columns) {
|
if (!columns) {
|
||||||
return [];
|
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;
|
return columns;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,20 +24,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-img__preview {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--inset {
|
&--inset {
|
||||||
.ant-table-wrapper {
|
.ant-table-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-tag {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-table-wrapper {
|
.ant-table-wrapper {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,12 @@
|
||||||
:imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
|
:imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #category="{ record }">
|
||||||
|
<Tag color="green">
|
||||||
|
{{ record.no }}
|
||||||
|
</Tag>
|
||||||
|
</template>
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -24,6 +30,13 @@
|
||||||
dataIndex: 'id',
|
dataIndex: 'id',
|
||||||
slots: { customRender: 'id' },
|
slots: { customRender: 'id' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '分类',
|
||||||
|
dataIndex: 'category',
|
||||||
|
width: 80,
|
||||||
|
align: 'center',
|
||||||
|
slots: { customRender: 'category' },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
|
|
@ -60,6 +73,7 @@
|
||||||
title: '自定义列内容',
|
title: '自定义列内容',
|
||||||
api: demoListApi,
|
api: demoListApi,
|
||||||
columns: columns,
|
columns: columns,
|
||||||
|
bordered: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue