<a-tree
:tree-data="treeData"
@select="onSelect"
:replace-fields="replaceFied"
:expandedKeys.sync="defaultSelectedKeys"
:defaultSelectedKeys="defaultSelectedKeys"
>
<template slot="custom" slot-scope="item">
<div @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)">
<span>{{ item.fVcGroupName }}</span>
<div v-show="item.show" style="float: right">
<!-- 新增子级 -->
<a-icon v-show="!item.isPeople" type="plus" class="iconplus " @click="changeFulevel(item)" />
<!-- 编辑同级 -->
<a-icon v-show="!item.isPeople" type="edit" class="iconplus" @click="onEdit(item)" />
<!-- 删除同级 -->
<a-icon v-show="!item.children" type="close" class="iconplus iconLast" @click="onRemove(item)" />
</div>
</div>
</template>
</a-tree>
通过变量show来控制
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
好多小伙伴希望我代码贴全一点,我的需求后来修改过,a-tree有些功能实在满足不了,所以a-tree改为el-tree去实现的
下面是比较全的代码,需要自己去读代码了,最近很忙,没有时间维护博客,等闲下来再来补充
<a-row class="mainContent1">
<el-input placeholder="搜索用户" v-model="filterText1" clearable class="treeInput1"></el-input>
<a-col :md="23" :xs="24" class="left-wrapper1" ref="left_wrapper">
<div class="treeSize1">
<!-- 第一个树 -->
<el-tree
ref="usertree"
:data="treeData"
:filter-node-method="filterNode1"
@node-click="onSelect1"
:props="replaceFied1"
:default-expanded-keys="defaultSelectedKeys"
node-key="fPkGroupId"
:highlight-current="true"
id="fPkGroupId"
>
<span slot-scope="{ node, data }" @click="mouseenter(node, data)" class="treeSpan1">
<span>
<span>{{ node.label }}</span>
<span v-if="!data.isPeople && data.fPkGroupId !== '0-0'">({{ data.userCount }})</span>
<span v-else-if="data.fPkGroupId == '0-0'">({{ weiCount }})</span>
</span>
<div style="float: right;margin-right:20px" class="treeSlot">
<!-- 新增同级 -->
<a-icon v-show="!item.isPeople" type="plus" class="iconplus iconSame" @click="changeTongji" />
<!-- 新增子级 -->
<i
v-show="!data.isPeople && data.fPkGroupId !== '0-0'"
class="el-icon-plus iconplus"
@click="changeFulevel(data)"
/>
<!-- 编辑同级 -->
<i v-show="!data.isPeople && data.fPkGroupId !== '0-0'" class="el-icon-edit" @click="onEdit(data)" />
<el-popover
ref="dcPopover"
placement="right"
popper-class="popverClass"
width="350"
trigger="hover"
offset="390"
:popper-options="{ boundariesElement: 'body' }"
>
<div class="headTitle">选择分组</div>
<el-input
placeholder="搜索分组"
v-model="filterText2"
clearable
@input="filterChange($event, data.fPkGroupId)"
>
</el-input>
<a-row class="treeRow">
<a-col :md="23" :xs="24" class="left-wrapper2">
<div class="treeSize2">
<!-- 第二个树 -->
<vue-scroll :ops="ops">
<el-tree
:ref="'grouptree' + data.fPkGroupId"
:data="GroupTreedata"
:filter-node-method="filterNode2"
@node-click="onSelect2"
node-key="fPkGroupId"
:props="replaceFied2"
>
</el-tree>
</vue-scroll>
</div>
</a-col>
</a-row>
<span
v-show="data.isPeople && !data.children"
slot="reference"
class="treeUesrmove"
@mouseenter="openDialog(data)"
@mouseleave="closeDialog(data)"
>移动</span
>
</el-popover>
<i
v-show="!data.isPeople && !data.children"
class="el-icon-close iconplus iconLast"
@click="onRemove(data)"
/>
</div>
</span>
</el-tree>
</div>
<div style="width:100%">
<a-spin :spinning="inputSpining" class="inputSpin">
<a-input
placeholder="新建分组标签"
class="left_content_input"
v-model="createPutvalue"
id="inputName"
autocomplete="off"
>
<a-icon slot="addonAfter" type="check" @click="$refs.moveTreeuserRef.add($event)" />
</a-input>
</a-spin>
</div>
</a-col>
</a-row>
没有仔细筛选,全都贴出来了
data() {
return {
status,
echart: null,
cacheId: [], //缓存图表数据
curUser: [], // 当前用户列表
curGroup: [],
echart: null,
visible: false, //配置用户树弹窗
editVisible: false,
addfuVisible: false, //新增子级弹窗
labelFlag: true, //切换新标签按钮和输入框
fulevelFlag: false, //切换新增子级图标和输入框
tongjiFlag: false, //切换新增同级图标和输入框
fInParentId: '', //子级数据父id
loading: false,
createPutvalue: '', //创建新标签input值,保存新标签接口必传字段
addPutvalue: '', //同级输入框
addfuPutvalue: '', //子级输入框
userName: '', //右击x轴显示用户名
userNameFlag: true,
fInUserId: '', //分组接口用户id
fPkGroupId: '', //分组接口分组id
fPkGroupId11: '', //分组接口分组id
treeData: [],
GroupTreedata: [],
dataList: [],
xData: [],
xDataid: '',
newXdata: [],
subMenuList: [],
defaultSelectedKeys: [],
replaceFied1: { children: 'children', label: 'fVcGroupName' },
replaceFied2: { children: 'children', label: 'fVcGroupName' },
inputSpining: false,
notGroupObj: {},
notGroupList: [],
showMove: false,
popoverVisible: false,
searchValue: '',
filterText1: '',
filterText2: '',
curFilterKey: '',
weiCount: 0,
alabelId: '',
treeVisible: false,
creatLabelId: '', //创建的时候返回的分组id
echartsFlag: 0,
ops: {
vuescroll: {
mode: 'native', //模式:pc natice 移动端是slice
sizeStrategy: 'percent', //父元素是否是固定的是就percent
不是就是number 填一个数值
detectResize: true //内容是否根据页面调整
},
scrollPanel: {
scrollingY: true
},
rail: {
background: '#01a99a',
opacity: 0,
size: '6px',
gutterOfSide: '2px',
keepShow: true
},
bar: {
background: '#bcd0f5',
onlyShowBarOnScroll: false,
keepShow: true,
opacity: 0.8,
size: '3px',
'overflow-x': 'hidden'
}
},
timeSpining:false,
}
},
watch: {
// watch监听不一样,usertree和grouptree
filterText1(val) {
this.$refs.usertree.filter(val)
},
filterText2(val) {
setTimeout(() => {
this.$refs['grouptree' + this.curFilterKey].filter(val)
}, 200)
}
},
// 分组树输入框事件
filterChange(e, key) {
this.curFilterKey = key
},
filterNode1(value, data) {
if (!value) return true
return data.fVcGroupName.indexOf(value) !== -1
},
filterNode2(value, data) {
if (!value) return true
return data.fVcGroupName.indexOf(value) !== -1
},
// 查询分类列表--树数据
getClassfiyList() {
let that = this
getgroupUserlist().then(async res => {
// console.log(res,'查询分类列表--树数据');
if (res && res.code == 0) {
const scopedSlots = {
title: 'custom'
}
let notGroupObj = {
fInParentId: '',
fVcGroupName: '未分组',
isPeople: false,
fPkGroupId: '0-0',
fVcParentGroupCode: null,
fVcParentName: null,
fVcGroupCode: '00',
scopedSlots: scopedSlots,
children: []
}
this.notGroupObj = notGroupObj
await this.dealnotGroupUser()
res.data.groupList.unshift(notGroupObj)
let arr1 = res.data.groupList
let arr2 = res.data.userList
arr1.forEach(item => {
item.scopedSlots = scopedSlots
item.isPeople = false
item.id = item.fPkGroupId
})
arr2.forEach(item => {
item.id = item.fPkGroupId
item.fInParentId = item.fPkGroupId
item.fPkGroupId = item.fInUserId
item.fVcGroupName = item.fVcUserName
item.scopedSlots = scopedSlots
item.isPeople = true
})
this.treeData = this.dealTreedata([...arr1, ...arr2])
if (that.$refs.usertree) {
that.$nextTick(() => {
if (that.treeData && that.treeData.length > 0) {
console.log(that.defaultSelectedKeys, '设置that.defaultSelectedKeys')
that.$refs.usertree.setCurrentKey(that.defaultSelectedKeys[0])
}
setTimeout(() => {
let treeSize1 = $('.treeSize1')
let parentHeight = $('.treeSize1').height() - 80
let dom = $('.is-current')
console.log(treeSize1,parentHeight,dom,'cashanalysis height');
if (dom.position().top >= parentHeight) {
treeSize1.animate(
{
scrollTop: dom.position().top
},
500
)
}
})
})
}
}
})
},
// 查询分类列表--树数据
getClassfiyList2() {
getgroupUserlist().then(res => {
if (res && res.code == 0) {
let arr1 = res.data.groupList
// let arr2 = res.data.userList
arr1.forEach(item => {
// item.scopedSlots = scopedSlots
item.isPeople = false
})
arr1.unshift({
fInParentId: '',
fVcGroupName: '未分组',
isPeople: false,
fPkGroupId: '0-0'
})
this.GroupTreedata = this.dealTreedata([...arr1])
}
})
},
async dealnotGroupUser() {
await weiflUser().then(res => {
res.rows.forEach(m => {
m.isPeople = true
m.fPkGroupId = m.fInUserId
m.fVcGroupName = m.fVcUserName
// this.notGroupList.push(m)
this.notGroupObj.children.push(m)
})
this.weiCount = this.notGroupObj.children.length
// console.log(this.weiCount,'this.weiCount');
})
},
dealTreedata(data) {
let result = []
if (!Array.isArray(data)) {
return result
}
let map = {}
data.forEach(item => {
map[item.fPkGroupId] = item
})
data.forEach(item => {
let parent = map[item.fInParentId]
if (parent) {
;(parent.children || (parent.children = [])).push(item)
} else {
result.push(item)
}
})
return result
},
// 用户树选中事件
onSelect1(key, event) {
// console.log(key, event, '金额分组树1')
this.fPkGroupId = key.fPkGroupId
// key.id = key.fPkGroupId
// console.log(key, event)
},
// 分组树选择事件
onSelect2(key, event) {
console.log(key, event, '金额分组树2')
this.fPkGroupId2 = key.fPkGroupId
this.fVcGroupName = key.fVcGroupName
this.defaultSelectedKeys = [key.fPkGroupId]
if (this.fPkGroupId2 !== '0-0') {
setUserbelongs({ fInUserId: this.fInUserId, fPkGroupId: this.fPkGroupId2 })
.then(res => {
if (res && res.code == 0) {
this.$message.success('添加成功')
// that.filterText = ''
// that.visible = false
this.getClassfiyList()
this.getClassfiyList2()
if (this.cacheId.length) {
this.dealxdata(this.cacheId[this.cacheId.length - 1])
this.initData()
} else {
this.initData()
}
}
})
.catch(err => {
this.$message.error(err)
console.log(err)
})
} else {
cancelUser({ id: this.fPkRelationId })
.then(res => {
if (res && res.code == 0) {
this.$message.success('添加成功')
this.getClassfiyList()
if (this.cacheId.length) {
this.dealxdata(this.cacheId[this.cacheId.length - 1])
} else {
this.initData()
}
}
})
.catch(err => {
this.$message.error(err)
console.log(err)
})
}
this.filterText1 = ''
this.filterText2 = ''
this.visible = true
},
mouseenter(node, data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},