chore: 优化样式
This commit is contained in:
parent
2b850a5b89
commit
543fb0cf91
@ -126,7 +126,7 @@ const gridOptions: VxeGridProps = {
|
|||||||
// 自定义列
|
// 自定义列
|
||||||
custom: false,
|
custom: false,
|
||||||
// 最大化
|
// 最大化
|
||||||
zoom: false,
|
zoom: true,
|
||||||
// 刷新
|
// 刷新
|
||||||
refresh: false,
|
refresh: false,
|
||||||
},
|
},
|
||||||
@ -286,10 +286,11 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* checkedKeys依赖menus 要在外部确保menus先加载
|
||||||
|
*/
|
||||||
watch(checkedKeys, (value) => {
|
watch(checkedKeys, (value) => {
|
||||||
console.log(props.menus);
|
|
||||||
const allCheckedKeys = uniq([...value]);
|
const allCheckedKeys = uniq([...value]);
|
||||||
console.log(allCheckedKeys);
|
|
||||||
// 赋值
|
// 赋值
|
||||||
const records = tableApi.grid.getData();
|
const records = tableApi.grid.getData();
|
||||||
setCheckedByKeys(records, allCheckedKeys, association.value);
|
setCheckedByKeys(records, allCheckedKeys, association.value);
|
||||||
@ -302,13 +303,13 @@ const options = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
async function handleAssociationChange() {
|
async function handleAssociationChange() {
|
||||||
// 需要清空全部勾选
|
|
||||||
await tableApi.grid.clearCheckboxRow();
|
|
||||||
// 清空全部permissions选中
|
// 清空全部permissions选中
|
||||||
const records = tableApi.grid.getData();
|
const records = tableApi.grid.getData();
|
||||||
records.forEach((item) => {
|
records.forEach((item) => {
|
||||||
allChecked(item, false);
|
allChecked(item, false);
|
||||||
});
|
});
|
||||||
|
// 需要清空全部勾选
|
||||||
|
await tableApi.grid.clearCheckboxRow();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -371,7 +372,7 @@ function getKeys(records: MenuPermissionOption[], handleChildren: boolean) {
|
|||||||
function getCheckedKeys() {
|
function getCheckedKeys() {
|
||||||
// 节点关联
|
// 节点关联
|
||||||
if (association.value) {
|
if (association.value) {
|
||||||
const records = tableApi.grid.getCheckboxRecords();
|
const records = tableApi?.grid?.getCheckboxRecords?.() ?? [];
|
||||||
console.log(records);
|
console.log(records);
|
||||||
// 子节点
|
// 子节点
|
||||||
const nodeKeys = getKeys(records, true);
|
const nodeKeys = getKeys(records, true);
|
||||||
@ -384,9 +385,9 @@ function getCheckedKeys() {
|
|||||||
// 节点独立
|
// 节点独立
|
||||||
|
|
||||||
// 勾选的行
|
// 勾选的行
|
||||||
const records = tableApi.grid.getCheckboxRecords();
|
const records = tableApi?.grid?.getCheckboxRecords?.() ?? [];
|
||||||
// 全部数据 用于获取permissions
|
// 全部数据 用于获取permissions
|
||||||
const allRecords = tableApi.grid.getData();
|
const allRecords = tableApi?.grid?.getData?.() ?? [];
|
||||||
const ids = records.map((item) => item.id);
|
const ids = records.map((item) => item.id);
|
||||||
const permissions = getKeys(allRecords, false);
|
const permissions = getKeys(allRecords, false);
|
||||||
const allIds = uniq([...ids, ...permissions]);
|
const allIds = uniq([...ids, ...permissions]);
|
||||||
@ -401,7 +402,19 @@ defineExpose({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex h-full flex-col">
|
<div class="flex h-full flex-col">
|
||||||
<Alert message="beta功能" type="warning" show-icon />
|
<Alert class="mx-2 mb-2" message="beta功能" type="warning" show-icon />
|
||||||
|
<Alert class="mx-2" type="info" show-icon>
|
||||||
|
<template #message>
|
||||||
|
<div v-if="tableApi?.grid">
|
||||||
|
已选中
|
||||||
|
<span class="text-primary mx-1 font-semibold">
|
||||||
|
{{ getCheckedKeys().length }}
|
||||||
|
</span>
|
||||||
|
个节点
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
<BasicTable>
|
<BasicTable>
|
||||||
<template #toolbar-actions>
|
<template #toolbar-actions>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
@ -414,7 +427,7 @@ defineExpose({
|
|||||||
</template>
|
</template>
|
||||||
<template #toolbar-tools>
|
<template #toolbar-tools>
|
||||||
<Space>
|
<Space>
|
||||||
<a-button @click="getCheckedKeys">测试expose</a-button>
|
<a-button @click="getCheckedKeys">打印选中的节点</a-button>
|
||||||
<a-button @click="setExpandOrCollapse(false)">
|
<a-button @click="setExpandOrCollapse(false)">
|
||||||
{{ $t('pages.common.collapse') }}
|
{{ $t('pages.common.collapse') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
@ -438,3 +451,9 @@ defineExpose({
|
|||||||
</BasicTable>
|
</BasicTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.ant-alert) {
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user