<template>
<div class="treeContent">
<p>左右的勾选穿梭树</p>
<div class="treeitem">
<div class="treeBox">
<p>请勾选</p>
<el-tree ref="treeLeft" node-key="code" :data="cityArr" :props="defaultProps1" show-checkbox @check="selectCheck" />
</div>
<div class="treeBox">
<p>已选择</p>
<el-tree ref="treeRight" node-key="code" :data="cityArr" :props="defaultProps2" show-checkbox :render-content="renderContent" @check="cancelCheck" />
</div>
</div>
<p>树的默认勾选和禁用</p>
<div class="treeitem">
<div class="treeBox">
<p>通过Props进行初始化禁用</p>
<el-tree node-key="code" :data="cityArr" :props="defaultDisabled" show-checkbox :default-checked-keys="defaultExpandedKeys" />
</div>
<div class="treeBox">
<p>接口获取数据后的回填禁用</p>
<el-tree ref="treeDisable" node-key="code" :data="cityArr" :props="defaultProps3" show-checkbox :default-checked-keys="defaultExpandedKeys" />
</div>
</div>
<p>懒加载树</p>
<div class="treeitem">
<div class="treeBox">
<p>基本的懒加载</p>
<el-tree node-key="id" :props="defaultProps4" :load="loadNode" lazy show-checkbox />
</div>
<div class="treeBox">
<p>table中的懒加载树</p>
<el-table
style="width: 100%"
row-key="id"
:data="tableData"
border
lazy
:load="loadTable"
:tree-props="{ children: 'children', hasChildren: 'hasChildren',}"
>
<el-table-column prop="id" label="区域ID" />
<el-table-column prop="name" label="区域名称" />
<el-table-column prop="sort" label="区域排名" />
</el-table>
</div>
</div>
<p>树的拖拽</p>
<div class="treeitem">
<div class="treeBox">
<el-tree
:data="cityArr"
node-key="code"
:props="defaultProps1"
:allow-drop="allowDrop"
:allow-drag="allowDrag"
/>
</div>
<div class="treeBox" />
</div>
</div>
</template>
<script lang='js'>
import {
defineComponent,ref} from 'vue'
import {
arr} from './data.js'
export default defineComponent({
name: 'PackingTrees',
setup() {
const cityArr = arr
const defaultExpandedKeys = [510500,510600,510900,511100]
const defaultProps1 = {
children: 'childCityList',
label: 'name',
disabled:false
}
const defaultProps2 = {
children: 'childCityList',
label: 'name',
disabled:false
}
const defaultProps3 = {
children: 'childCityList',
label: 'name',
}
const defaultProps4 = {
children: 'childCityList',
label: 'name',
isLeaf: 'isLeaf',
}
const defaultDisabled = {
children: 'childCityList',
label: 'name',
disabled: (data,node)=> {
if(defaultExpandedKeys.includes(data.code)) return true
}
}
const tableData = [
{
"id": 34143,
"parentId": 0,
"sort": 101,
"name": "西南大区",
"children": null,
"isLeaf": true,
"hasChildren":true
},
{
"id": 34144,
"parentId": 0,
"sort": 101,
"name": "华南大区",
"children": null,
"isLeaf": false,
"hasChildren":true
}
]
const treeRight = ref()
const treeLeft = ref()
const treeDisable = ref()
setTimeout(() => {
let arr = treeDisable.value.getCheckedNodes()
arr.forEach(item => {
item.disabled = true
});
}, 1200);
const renderContent = function (h, {
node, data, store }) {
node.visible = node.checked || node.indeterminate;
return h('span',node.label );
}
const selectCheck = (node) => {
let nodeDom = treeLeft.value.getNode(node.code)
if (nodeDom.checked) {
treeRight.value.setChecked(node.code,true,true)
} else {
treeRight.value.setChecked(node.code,false,true)
}
}
const cancelCheck = (node) => {
let nodeDom = treeRight.value.getNode(node.code)
if(!nodeDom.check) {
treeLeft.value.setChecked(node.code,false,true)
}
}
const loadNode = function (node, resolve) {
if(node.level == 0) {
const arr = getData()
resolve(arr || [])
} else {
const arr = getData(node.data.id)
resolve(arr || [])
}
}
const loadTable = function (row,treeNode,resolve) {
const arr = getData(row.id)
resolve(arr || [])
}
const getData = function (id=-1) {
if(id < 0) {
return [
{
"id": 34143,
"parentId": 0,
"sort": 101,
"name": "西南大区",
"children": null,
"isLeaf": false
},
{
"id": 34144,
"parentId": 0,
"sort": 101,
"name": "华南大区",
"children": null,
"isLeaf": false
}
]
} else if (id === 34143) {
return [
{
"id": 392,
"parentId": 34143,
"sort": 101,
"name": "堂堂唐",
"children": null,
"isLeaf": true
},
{
"id": 394,
"parentId": 34143,
"sort": 101,
"name": "1925验证预发布",
"children": null,
"isLeaf": true
},
{
"id": 396,
"parentId": 34143,
"sort": 101,
"name": "225566分公司",
"children": null,
"isLeaf": true
},
]
} else if (id === 34144) {
return [
{
"id": 397,
"parentId": 34143,
"sort": 101,
"name": "测试拆分分公司",
"children": null,
"isLeaf": false,
"hasChildren":true
},
{
"id": 404,
"parentId": 34143,
"sort": 101,
"name": "个电饭锅电饭锅的个",
"children": null,
"isLeaf": true
},
]
} else if(id === 397 ){
return [
{
"id": 451,
"parentId": 34143,
"sort": 101,
"name": "北金分公司",
"children": null,
"isLeaf": true
},
{
"id": 452,
"parentId": 34143,
"sort": 101,
"name": "分公司名称",
"children": null,
"isLeaf": true
},
{
"id": 458,
"parentId": 34143,
"sort": 101,
"name": "测试分公司啊啊啊",
"children": null,
"isLeaf": true
},
]
}
}
return {
cityArr,
defaultProps1,
defaultProps2,
defaultProps3,
defaultProps4,
defaultDisabled,
treeRight,
treeLeft,
treeDisable,
tableData,
cancelCheck,
renderContent,
selectCheck,
defaultExpandedKeys,
loadNode,
loadTable
}
},
})
</script>
<style lang="less" scoped>
.treeitem {
display: flex;
justify-content: space-around;
.treeBox {
padding: 20px;
width: 44%;
}
}
</style>