twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化PureTableBar组件的列设置弹出框，设置最大高度，超出可滚动 (#780)

Browse Source
This commit is contained in:
zepeng 2023-10-31 01:19:28 +08:00 committed by GitHub
parent 29f83b4911
commit 3092728f17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/RePureTableBar/src/bar.tsx
View File

@ -262,7 +262,7 @@ export default defineComponent({
v-slots={reference} v-slots={reference}
placement="bottom-start" placement="bottom-start"
popper-style={{ padding: 0 }} popper-style={{ padding: 0 }}
width="160" width="200"
trigger="click" trigger="click"
> >
<div class={[topClass.value]}> <div class={[topClass.value]}>
@ -279,48 +279,50 @@ export default defineComponent({
</div> </div>
<div class="pt-[6px] pl-[11px]"> <div class="pt-[6px] pl-[11px]">
<el-checkbox-group <el-scrollbar max-height="36vh">
v-model={checkedColumns.value} <el-checkbox-group
onChange={value => handleCheckedColumnsChange(value)} v-model={checkedColumns.value}
> onChange={value => handleCheckedColumnsChange(value)}
<el-space
direction="vertical"
alignment="flex-start"
size={0}
> >
{checkColumnList.map(item => { <el-space
return ( direction="vertical"
<div class="flex items-center"> alignment="flex-start"
<DragIcon size={0}
class={[ >
"drag-btn w-[16px] mr-2", {checkColumnList.map(item => {
isFixedColumn(item) return (
? "!cursor-no-drop" <div class="flex items-center">
: "!cursor-grab" <DragIcon
]} class={[
onMouseenter={(event: { "drag-btn w-[16px] mr-2",
preventDefault: () => void; isFixedColumn(item)
}) => rowDrop(event)} ? "!cursor-no-drop"
/> : "!cursor-grab"
<el-checkbox ]}
key={item} onMouseenter={(event: {
label={item} preventDefault: () => void;
onChange={value => }) => rowDrop(event)}
handleCheckColumnListChange(value, item) />
} <el-checkbox
> key={item}
<span label={item}
title={item} onChange={value =>
class="inline-block w-[120px] truncate hover:text-text_color_primary" handleCheckColumnListChange(value, item)
}
> >
{item} <span
</span> title={item}
</el-checkbox> class="inline-block w-[120px] truncate hover:text-text_color_primary"
</div> >
); {item}
})} </span>
</el-space> </el-checkbox>
</el-checkbox-group> </div>
);
})}
</el-space>
</el-checkbox-group>
</el-scrollbar>
</div> </div>
</el-popover> </el-popover>
</div> </div>