96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<template>
|
||
<view>
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<tree-node
|
||
v-for="item in data"
|
||
:key="item[idKey]"
|
||
:node="item"
|
||
:children-key="childrenKey"
|
||
:label-key="labelKey"
|
||
:id-key="idKey"
|
||
:checked-bg-color="checkedBgColor"
|
||
:multiple="multiple"
|
||
:checked-ids="checkedIds"
|
||
:default-expanded="defaultExpanded"
|
||
@check-change="handleCheckChange"
|
||
/>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TreeNode from './TreeNode.vue';
|
||
|
||
export default {
|
||
name: 'TreeView',
|
||
components: {
|
||
TreeNode
|
||
},
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
childrenKey: {
|
||
type: String,
|
||
default: 'children'
|
||
},
|
||
labelKey: {
|
||
type: String,
|
||
default: 'text'
|
||
},
|
||
idKey: {
|
||
type: String,
|
||
default: 'id'
|
||
},
|
||
value: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
checkedBgColor: { type: String, default: '#fff' },
|
||
multiple: { type: Boolean, default: true },
|
||
defaultExpanded: { type: Boolean, default: false }
|
||
},
|
||
data() {
|
||
return {
|
||
checkedIds: [...this.value]
|
||
}
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
this.checkedIds = [...val];
|
||
}
|
||
},
|
||
methods: {
|
||
handleCheckChange(event) {
|
||
const { id, label, checked } = event;
|
||
if (this.multiple) {
|
||
const idx = this.checkedIds.indexOf(id);
|
||
if (checked && idx === -1) {
|
||
this.checkedIds.push(id);
|
||
} else if (!checked && idx !== -1) {
|
||
this.checkedIds.splice(idx, 1);
|
||
}
|
||
} else {
|
||
// 单选：只保留当前id
|
||
this.checkedIds = checked ? [id] : [];
|
||
}
|
||
|
||
this.$emit('input', this.checkedIds.slice());
|
||
this.$emit('change', this.checkedIds.slice());
|
||
this.$emit('node-click', id, checked, label);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 保持你的样式 */
|
||
.scroll-view {
|
||
// margin: 10rpx 26rpx;
|
||
width: calc(100%);
|
||
max-height: 60vh;
|
||
border-radius: 6rpx;
|
||
background-color: white;
|
||
}
|
||
</style> |