<template>
|
<div
|
id="tree-share"
|
>
|
<Tree
|
:data="data"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@check="handleNodeClick"
|
highlight-current
|
:check-on-click-node="false"
|
:check-strictly="false"
|
:render-content="renderContent"
|
:expand-on-click-node="false"
|
id="tree"
|
ref="treeShare"
|
node-key="id"
|
:filter-node-method="filterNode"
|
>
|
</Tree>
|
</div>
|
</template>
|
|
<script>
|
import { Tree, Button } from 'element-ui'
|
export default {
|
name: 'ShareTree',
|
data: () => ({
|
searchValue: '',
|
nodeStatus: {}
|
}),
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'children',
|
label: 'label'
|
})
|
},
|
isOpenAll: {
|
default: true,
|
type: Boolean
|
},
|
index: {
|
type: Number,
|
required: false,
|
default: 0
|
}
|
},
|
watch: {
|
data: {
|
handler(newValue, oldValue) {
|
console.log(newValue, '子组件监听实时变化数据')
|
this.$refs.treeShare.filter(true)
|
}
|
}
|
},
|
methods: {
|
handleNodeClick(node) {
|
console.log(node, '设备树勾选事件')
|
let selectNodes = this.$refs.treeShare.getCheckedNodes()
|
console.log(selectNodes, 'selectNode', this.index, 'index')
|
this.$emit('currentNode', selectNodes, this.index)
|
},
|
// * 设置选中状态
|
setCurrentKey(ids) {
|
// console.log(ids, '设置选中状态 ids')
|
// this.$refs.treeShare.setCheckedKeys([])
|
// if (ids && ids.length !== 0) {
|
// ids.forEach((item, index) => {
|
// console.log(item, '设置选中状态 item')
|
// // this.$refs.treeShare.setChecked(item[index]['id'], true)
|
// this.$nextTick(() => {
|
// this.$refs.treeShare.setChecked(item['id'], true)
|
// })
|
// })
|
// }
|
if (ids && ids.length !== 0) {
|
ids.forEach((i, index) => {
|
this.$refs.treeShare.setChecked(i, true)
|
})
|
}
|
},
|
/** 全部取消勾选 */
|
cancleCheck() {
|
this.$refs.treeShare.setCheckedKeys([])
|
},
|
// * 设置选中状态
|
setCurrentKeyOne(id) {
|
console.log(id, '设置选中的集群节点')
|
this.$refs.treeShare.setChecked(id, true)
|
},
|
// * 设置选中状态,希望同时改变节点颜色
|
setKeyOneAndClass(data) {
|
console.log(data, '设置树节点颜色')
|
let keys = {}
|
let errorkeys = []
|
let sukeys = []
|
this.nodeStatus = {}
|
/** 判断传过来的对象是数组还是Object */
|
if (data instanceof Array) {
|
if (data && data.length !== 0) {
|
data.forEach((item) => {
|
/** 判断该节点是否分享成功 */
|
if (item.isSuccess === -1) {
|
errorkeys.push(item.uuid)
|
console.log(errorkeys, 'errorkeys')
|
this.$set(keys, 'errorkeys', errorkeys)
|
} else {
|
sukeys.push(item.uuid)
|
this.$set(keys, 'sukeys', sukeys)
|
}
|
})
|
}
|
} else {
|
if (data.notDataBase && data.notDataBase.length !== 0) {
|
data.notDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
sukeys.push(item.uuid)
|
})
|
this.$set(keys, 'sukeys', sukeys)
|
} else if (data.existDataBase && data.existDataBase.length !== 0) {
|
data.existDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
errorkeys.push(item.uuid)
|
})
|
this.$set(keys, 'errorkeys', errorkeys)
|
} else {
|
if (data.allDataBase && data.allDataBase.length !== 0) {
|
data.allDataBase.forEach(item => {
|
this.setCurrentKeyOne(item.uuid)
|
})
|
}
|
}
|
}
|
|
console.log(keys, 'keys')
|
this.nodeStatus = keys
|
},
|
// 清空选中状态
|
removeCurrentNode(data) {
|
console.log(data, '进入清空选中状态')
|
if (data && data.length !== 0) {
|
let keys = []
|
data.forEach(item => {
|
keys.push(item)
|
})
|
console.log(keys, '存储的选中的keys')
|
keys.forEach(item => {
|
this.$refs.treeShare.setChecked(item, false)
|
})
|
|
// this.$refs.treeShare.setCheckedNodes(null)
|
} else {
|
this.$refs.treeShare.setCheckedKeys([])
|
}
|
},
|
// * 过滤
|
handleSearch() {
|
this.$refs.treeShare.filter(this.searchValue)
|
},
|
// * 过滤
|
filterNode(value, data) {
|
console.log(data, 'filter')
|
if (data.isCheck) {
|
return true
|
} else {
|
return false
|
}
|
},
|
// * 获取被选中节点
|
getCurrentNode() {
|
return this.$refs.treeShare.getCurrentNode()
|
},
|
// 获取被选中的所有节点
|
getCurrentNodes() {
|
return this.$refs.treeShare.getCheckedNodes()
|
},
|
// 接触禁用状态
|
unDisabled(data) {
|
console.log(data, '解除禁用')
|
this.data = data
|
},
|
renderContent(h, { node, data, store }) {
|
return (
|
<span class="custom-tree-node">
|
<span>{node.label}</span>
|
</span>)
|
},
|
/** 删除节点 */
|
delete(data) {
|
console.log(data, '删除')
|
}
|
},
|
components: {
|
Tree,
|
elButton: Button
|
},
|
mounted() {
|
this.$refs.treeShare.filter(true)
|
}
|
}
|
</script>
|
|
<style lang="scss" socped>
|
#tree-share{
|
.el-tree-node .el-tree-node__content {
|
line-height: 40px;
|
height: 40px;
|
font-size: 18px;
|
border-radius: 2px;
|
position: relative;
|
.el-checkbox {
|
margin-bottom: 0;
|
}
|
.el-tree-node__expand-icon {
|
font-size: 20px;
|
position: absolute;
|
top: 4px;
|
right: 0px;
|
-webkit-transform: rotate(180deg);
|
transform: rotate(180deg);
|
}
|
.el-tree-node__expand-icon.expanded {
|
-webkit-transform: rotate(90deg);
|
transform: rotate(90deg);
|
}
|
}
|
#tree > .el-tree-node > :first-child.el-tree-node__content {
|
background: #35bde7;
|
color: #fff;
|
// color: brown;
|
.el-tree-node__expand-icon {
|
color: #fff;
|
}
|
.el-checkbox {
|
margin-left: 10px;
|
}
|
}
|
#tree
|
> .el-tree-node
|
> .el-tree-node__children
|
> .el-tree-node
|
> :first-child.el-tree-node__content {
|
background: #f8f8f8;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: #fff;
|
border-color: #fff;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
border-color: #333;
|
}
|
}
|
|
.redClass{
|
color: red;
|
}
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
}
|
.ml40{
|
margin-right: 24px;
|
}
|
</style>
|
