246 lines
12 KiB
Vue
246 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view style="padding:10px;color: #333;font-weight: 500;">
|
||
<view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
|
||
<view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
|
||
<view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
|
||
<view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
|
||
<view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
|
||
<view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
|
||
<!-- 异步加载demo -->
|
||
<view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
|
||
<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
|
||
</view>
|
||
<!-- 异步加载demo -->
|
||
<next-tree :selectParent="false" :checkStrictly="true" funcMode="checkbox" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />
|
||
|
||
<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :funcMode="funcMode" :treeData="treeData" @cancel="oncancel" @confirm="onconfirm">
|
||
<!-- label插槽示意代码 -->
|
||
<!-- <template v-slot:label="{data}">
|
||
<view class="line-block">
|
||
<image class="img" v-if="data.iconSrc" :src="data.iconSrc"></image>
|
||
<text space="nbsp" v-if="data.prev">{{data.prev}} </text><text>{{data.label}}</text><text space="nbsp" v-if="data.post"> {{data.post}}</text>
|
||
</view>
|
||
</template> -->
|
||
<!-- <template #topBar>
|
||
<view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
|
||
<view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
|
||
<button @click="checkedFunc('1-3-3-4')" :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
|
||
<button @click="checkedFunc('3-1-2')" :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
|
||
<button @click="checkedFunc('3-1-6')" :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
|
||
</view>
|
||
</template> -->
|
||
</next-tree>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let self = null;
|
||
export default {
|
||
data () {
|
||
return {
|
||
funcMode: 'radio',
|
||
selectParent: false,
|
||
checkStrictly: false,
|
||
activeId: '',
|
||
localData:{
|
||
'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
|
||
'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
|
||
'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
|
||
'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
|
||
'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
|
||
'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
|
||
},
|
||
asyncTreeData: [{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}],
|
||
treeData: [
|
||
{id: '1', label: '北京', checked: false},
|
||
{id: '2', label: '上海', checked: false, children: [
|
||
{id: '2-1', label: '上海-1', checked: false},
|
||
{id: '2-2', label: '上海-2', checked: false},
|
||
{id: '2-3', label: '上海-3', checked: false},
|
||
] },
|
||
{id: '3', label: '广州', children: [
|
||
{id: '3-1', label: '海珠区', checked: false, children: [
|
||
{id: '3-1-1', label: '海珠区-1', checked: false, disabled: true},
|
||
{id: '3-1-2', label: '海珠区-2', checked: false},
|
||
{id: '3-1-4', label: '海珠区-3', checked: false},
|
||
{id: '3-1-5', label: '海珠区-4', checked: false},
|
||
{id: '3-1-6', label: '海珠区-5', checked: false},
|
||
{id: '3-1-7', label: '海珠区-6', checked: false},
|
||
{id: '3-1-8', label: '海珠区-7', checked: false},
|
||
{id: '3-1-9', label: '海珠区-8', checked: false},
|
||
{id: '3-1-10', label: '海珠区-9', checked: false},
|
||
{id: '3-1-11', label: '海珠区-10', checked: false},
|
||
]},
|
||
{id: '3-2', label: '番禺区', checked: false, children: [
|
||
{id: '3-2-1', label: '番禺区-1', checked: false},
|
||
{id: '3-2-2', label: '番禺区-2', checked: false},
|
||
{id: '3-2-4', label: '番禺区-3', checked: false},
|
||
{id: '3-2-5', label: '番禺区-4', checked: false},
|
||
{id: '3-2-6', label: '番禺区-5', checked: false},
|
||
{id: '3-2-7', label: '番禺区-6', checked: false},
|
||
{id: '3-2-8', label: '番禺区-7', checked: false},
|
||
{id: '3-2-9', label: '番禺区-8', checked: false},
|
||
{id: '3-2-10', label: '番禺区-9', checked: false},
|
||
{id: '3-2-11', label: '番禺区-10', checked: false},
|
||
]},
|
||
{id: '3-3', label: '黄埔区', checked: false, children: [
|
||
{id: '3-3-1', label: '黄埔区-1', checked: false},
|
||
{id: '3-3-2', label: '黄埔区-2', checked: false},
|
||
{id: '3-3-3', label: '黄埔区-3', checked: false},
|
||
{id: '3-3-4', label: '黄埔区-4', checked: false},
|
||
{id: '3-3-5', label: '黄埔区-5', checked: false},
|
||
{id: '3-3-6', label: '黄埔区-6', checked: false},
|
||
{id: '3-3-7', label: '黄埔区-7', checked: false},
|
||
{id: '3-3-8', label: '黄埔区-8', checked: false},
|
||
{id: '3-3-9', label: '黄埔区-9', checked: false},
|
||
{id: '3-3-10', label: '黄埔区-10', checked: false},
|
||
{id: '3-3-12', label: '黄埔区-11', checked: false},
|
||
{id: '3-3-13', label: '黄埔区-12', checked: false},
|
||
{id: '3-3-13', label: '黄埔区-13', checked: false},
|
||
{id: '3-3-14', label: '黄埔区-14', checked: false},
|
||
{id: '3-3-15', label: '黄埔区-15', checked: false},
|
||
{id: '3-3-16', label: '黄埔区-16', checked: false},
|
||
{id: '3-3-17', label: '黄埔区-17', checked: false},
|
||
{id: '3-3-18', label: '黄埔区-18', checked: false},
|
||
{id: '3-3-19', label: '黄埔区-19', checked: false},
|
||
{id: '3-3-20', label: '黄埔区-20', checked: false},
|
||
{id: '3-3-21', label: '黄埔区-21', checked: false},
|
||
{id: '3-3-22', label: '黄埔区-22', checked: false},
|
||
{id: '3-3-23', label: '黄埔区-23', checked: false},
|
||
{id: '3-3-24', label: '黄埔区-24', checked: false},
|
||
{id: '3-3-25', label: '黄埔区-25', checked: false},
|
||
{id: '3-3-26', label: '黄埔区-26', checked: false},
|
||
{id: '3-3-27', label: '黄埔区-27', checked: false},
|
||
{id: '3-3-28', label: '黄埔区-28', checked: false},
|
||
{id: '3-3-29', label: '黄埔区-29', checked: false},
|
||
{id: '3-3-30', label: '黄埔区-30', checked: false},
|
||
{id: '3-3-31', label: '黄埔区-31', checked: false},
|
||
{id: '3-3-32', label: '黄埔区-32', checked: false},
|
||
{id: '3-3-33', label: '黄埔区-33', checked: false},
|
||
{id: '3-3-34', label: '黄埔区-34', checked: false},
|
||
{id: '3-3-35', label: '黄埔区-35', checked: false},
|
||
{id: '3-3-36', label: '黄埔区-36', checked: false},
|
||
]},
|
||
],
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
openTree() {
|
||
this.$refs.nextTreeAsyncRef.showTree = true
|
||
},
|
||
changeVerify(current, chooseList) {
|
||
// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
|
||
// 如果函数体不做return返回值，即验证通过，控件正常处理业务
|
||
console.log('当前变化的数据', current)
|
||
console.log('已选择的数据', chooseList)
|
||
if(chooseList && chooseList.length > 4) {
|
||
|
||
return '最多可以选择4个节点'
|
||
}
|
||
},
|
||
checkedFunc(id) {
|
||
if(this.activeId === id) {
|
||
this.activeId = '';
|
||
this.$refs.nextTreeRef.checkedFunc(id, false)
|
||
} else {
|
||
this.activeId = id;
|
||
this.$refs.nextTreeRef.checkedFunc(id)
|
||
}
|
||
},
|
||
loadData(data) {
|
||
const type = data.$type; // 加载类型
|
||
const source = data.source // 源数据
|
||
// 同步实现的代码处理方式
|
||
|
||
if (type === 'nodeLoad') {
|
||
const nodeItem = source;
|
||
// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
|
||
// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
|
||
|
||
// if(nodeItem && this.localData[nodeItem.id]) {
|
||
// return this.localData[nodeItem.id]
|
||
// } else {
|
||
// return []
|
||
// }
|
||
// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
|
||
// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
|
||
return new Promise((resolve, reject) => {
|
||
setTimeout(() => {
|
||
if(nodeItem && self.localData[nodeItem.id]) {
|
||
return resolve(self.localData[nodeItem.id])
|
||
} else {
|
||
return resolve([])
|
||
}
|
||
}, 1000)
|
||
})
|
||
} else if(type === 'remoteSearch') {
|
||
// ...doing
|
||
}
|
||
|
||
},
|
||
|
||
getTitle(checked) {
|
||
return `已选：${checked.length}项`
|
||
},
|
||
echoDefault() {
|
||
const selectIds = ['2-1','3-3-35']
|
||
this.checkedTreeData(this.treeData, selectIds)
|
||
console.log('treeData的数据：', this.treeData)
|
||
this.funcMode = 'checkbox'
|
||
this.$refs.nextTreeRef.showTree = true
|
||
},
|
||
itemclick(_multiple, _selectParent, _checkStrictly = false) {
|
||
this.funcMode = _multiple ? 'checkbox' : 'radio'
|
||
this.selectParent = _selectParent
|
||
this.checkStrictly = _checkStrictly
|
||
this.$refs.nextTreeRef.showTree = true
|
||
},
|
||
checkedTreeData(treeData, selectIds) {
|
||
// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
|
||
// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
|
||
(treeData || []).map(item => {
|
||
if (selectIds.indexOf(item.id) !== -1) {
|
||
item.checked = true
|
||
} else {
|
||
item.checked = false
|
||
}
|
||
if (item.children && item.children.length) {
|
||
this.checkedTreeData(item.children, selectIds)
|
||
}
|
||
})
|
||
},
|
||
onconfirm(list) {
|
||
console.log('选中项的数量列表list：', list)
|
||
},
|
||
oncancel() {
|
||
// 清除treeData的选中状态
|
||
this.checkedTreeData(this.treeData, [])
|
||
}
|
||
},
|
||
created() {
|
||
self = this
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.line-block {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 10rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
</style> |