ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

检测计划列表操作按钮调整，超过3个按钮时，调整为更多下拉

Browse Source
This commit is contained in:
hongawen
2024-11-13 15:24:42 +08:00
parent 328696eb55
commit 21441a64ad
3 changed files with 332 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/ProTable/components/TableColumn.vue
View File

@@ -1,57 +1,57 @@
<template>
<RenderTableColumn v-bind="column" />
<RenderTableColumn v-bind='column' />
</template>
<script setup lang="tsx" name="TableColumn">
import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
<script setup lang='tsx' name='TableColumn'>
import { ColumnProps, RenderScope, HeaderRenderScope } from '@/components/ProTable/interface'
import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from '@/utils'
defineProps<{ column: ColumnProps }>();
defineProps<{ column: ColumnProps }>()
const slots = useSlots();
const slots = useSlots()
const enumMap = inject("enumMap", ref(new Map()));
const enumMap = inject('enumMap', ref(new Map()))
// 渲染表格数据
const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
return enumMap.value.get(item.prop) && item.isFilterEnum
? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
: formatValue(handleRowAccordingToProp(scope.row, item.prop!));
};
? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
: formatValue(handleRowAccordingToProp(scope.row, item.prop!))
}
// 获取 tag 类型
const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
return (
filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag") || "primary"
);
};
filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, 'tag') || 'primary'
)
}
const RenderTableColumn = (item: ColumnProps) => {
return (
<>
{item.isShow && (
<el-table-column
{...item}
align={item.align ?? "center"}
showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
>
{{
default: (scope: RenderScope<any>) => {
if (item._children) return item._children.map(child => RenderTableColumn(child));
if (item.render) return item.render(scope);
if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope);
if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
return renderCellData(item, scope);
},
header: (scope: HeaderRenderScope<any>) => {
if (item.headerRender) return item.headerRender(scope);
if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope);
return item.label;
}
}}
</el-table-column>
)}
</>
);
};
<>
{item.isShow && (
<el-table-column
{...item}
align={item.align ?? 'center'}
showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}
>
{{
default: (scope: RenderScope<any>) => {
if (item._children) return item._children.map(child => RenderTableColumn(child))
if (item.render) return item.render(scope)
if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope)
if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>
return renderCellData(item, scope)
},
header: (scope: HeaderRenderScope<any>) => {
if (item.headerRender) return item.headerRender(scope)
if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope)
return item.label
},
}}
</el-table-column>
)}
</>
)
}
</script>