You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.6 KiB
122 lines
3.6 KiB
<template>
|
|
<ele-card header="标签显示策略">
|
|
<div style="max-width: 240px">
|
|
<ele-tree-select
|
|
ref="treeSelectRef"
|
|
clearable
|
|
multiple
|
|
placeholder="请选择"
|
|
v-model="selectedValue"
|
|
:popper-width="240"
|
|
:tree-props="treeProps"
|
|
:showCheckedStrategy="showCheckedStrategy"
|
|
:checkedValueStrategy="checkedValueStrategy"
|
|
/>
|
|
</div>
|
|
<option-item
|
|
label="显示策略"
|
|
:label-style="{ paddingTop: '6px' }"
|
|
style="margin-top: 10px; align-items: flex-start"
|
|
>
|
|
<el-radio-group
|
|
v-model="showCheckedStrategy"
|
|
style="flex-direction: column; align-items: flex-start"
|
|
>
|
|
<el-radio
|
|
value="parent"
|
|
label="parent(当子节点全部选中时只显示父级)"
|
|
style="margin: 0; display: flex; width: 100%"
|
|
/>
|
|
<el-radio
|
|
value="child"
|
|
label="child(只显示选中的子节点)"
|
|
style="margin: 0; display: flex; width: 100%"
|
|
/>
|
|
<el-radio
|
|
value="all"
|
|
label="all(显示所有选中的节点)"
|
|
style="margin: 0; display: flex; width: 100%"
|
|
/>
|
|
</el-radio-group>
|
|
</option-item>
|
|
<option-item label="值策略" :responsive="false" style="margin-top: 10px">
|
|
<el-radio-group v-model="checkedValueStrategy">
|
|
<el-radio :value="false" label="全部选中值" />
|
|
<el-radio :value="true" label="同标签策略" />
|
|
</el-radio-group>
|
|
</option-item>
|
|
<option-item label="选中值" style="margin-top: 10px">
|
|
{{ JSON.stringify(selectedValue) }}
|
|
</option-item>
|
|
</ele-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import type { EleTreeSelect } from 'ele-admin-plus/es';
|
|
import type { ShowCheckedStrategy } from 'ele-admin-plus/es/ele-tree-select/types';
|
|
import OptionItem from '@/views/extension/avatar/components/option-item.vue';
|
|
|
|
interface DataItem {
|
|
id: number;
|
|
label: string;
|
|
disabled?: boolean;
|
|
children?: DataItem[];
|
|
}
|
|
|
|
/** 树选择组件 */
|
|
const treeSelectRef = ref<InstanceType<typeof EleTreeSelect> | null>(null);
|
|
|
|
/** 选中值 */
|
|
const selectedValue = ref<number[]>([2, 3, 4]);
|
|
|
|
/** 树属性 */
|
|
const treeProps = reactive({
|
|
height: 266,
|
|
data: [] as DataItem[]
|
|
});
|
|
|
|
/** 标签显示策略 */
|
|
const showCheckedStrategy = ref<ShowCheckedStrategy>('parent');
|
|
|
|
/** 值策略 */
|
|
const checkedValueStrategy = ref(false);
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
const keys: number[] = [];
|
|
let count = 0;
|
|
const data = Array.from({ length: 4 }).map((_, i) => {
|
|
count++;
|
|
keys.push(count);
|
|
return {
|
|
id: count,
|
|
label: `${String(count).padStart(5, '0')}-node-${i + 1}`,
|
|
disabled: false,
|
|
children: Array.from({ length: 3 }).map((_, j) => {
|
|
count++;
|
|
keys.push(count);
|
|
return {
|
|
id: count,
|
|
label: `${String(count).padStart(5, '0')}-node-${i + 1}-${j + 1}`,
|
|
disabled: false,
|
|
children: Array.from({ length: 2 }).map((_, k) => {
|
|
count++;
|
|
const idStr = String(count).padStart(5, '0');
|
|
return {
|
|
id: count,
|
|
label: `${idStr}-node-${i + 1}-${j + 1}-${k + 1}`,
|
|
disabled: false
|
|
};
|
|
})
|
|
};
|
|
})
|
|
};
|
|
});
|
|
treeProps.data = data;
|
|
if (treeSelectRef.value && treeSelectRef.value.treeRef) {
|
|
treeSelectRef.value.treeRef.setExpandedKeys(keys);
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|