vue2+element-ui el-tree树形控件封装
1.封装
根据官网配置项封装了下el-tree 方便维护和复用，有用的话点赞收藏叭~
<template>
<div class="my-tree">
<el-input
v-if="hasSearch"
v-model="filterText"
class="search-input"
placeholder="输入关键字进行过滤">
</el-input>
<slot></slot>
<el-tree
ref="myTree"
:icon-class="iconClass"
:filter-node-method="filterNodeMethod"
:default-checked-keys="defaultCheckedKeys"
:check-strictly="checkStrictly"
:show-checkbox="showCheckbox"
:default-expanded-keys="defaultExpandedKeys"
:highlight-current="highlightCurrent"
:check-on-click-node="checkOnClickNode"
:default-expand-all="defaultExpandAll"
:expand-on-click-node="expandOnClickNode"
:node-key="nodeKey"
:data="treeData"
:props="defaultProps"
:empty-text="emptyText"
:render-content="renderContent"
@node-click="nodeClick"
@check="check"
@check-change="checkChange"
@current-change="currentChange"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse">
</el-tree>
</div>
</template>
<script>
export default {
name: 'MyTree',
props: {
nodeKey: {
type: String,
default: 'id'
},
// 树形控件展示数据
treeData: {
type: Array,
default: function () {
return []
}
},
// 默认展开的节点的 key 的数组
defaultExpandedKeys: {
type: Array,
default: function () {
return []
}
},
// props配置项
defaultProps: {
type: Object,
default: function () {
return {
label: 'label',
children: 'children',
disabled: function (data, node) {
return data
}
}
}
},
// 内容为空时的文案
emptyText: {
type: String,
default: '暂无数据'
},
// 是否高亮当前选中
highlightCurrent: {
type: Boolean,
default: false
},
// 是否默认展开所有节点
defaultExpandAll: {
type: Boolean,
default: false
},
// 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
expandOnClickNode: {
type: Boolean,
default: true
},
// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
checkOnClickNode: {
type: Boolean,
default: false
},
// 节点是否可被选择
showCheckbox: {
type: Boolean,
default: false
},
// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
checkStrictly: {
type: Boolean,
default: false
},
// 默认勾选的节点的 key 的数组
defaultCheckedKeys: {
type: Array,
default: function () {
return []
}
},
// 是否需要搜索功能
hasSearch: {
type: Boolean,
default: false
},
// 自定义树节点的图标
iconClass: {
type: String,
default: ''
},
// 自定义节点内容
renderContent: {
type: Function,
default: function (h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
</span>)
}
}
},
data() {
return {
filterText: '' // 关键字过滤值
}
},
watch: {
filterText(val) {
this.$refs.myTree.filter(val)
}
},
methods: {
// 节点被点击时的回调
nodeClick(data, node, self) {
this.$emit('nodeClick', { data, node, self })
},
// 当复选框被点击的时候触发
check(data, checkObj) {
this.$emit('check', { data, checkObj })
},
// 节点选中状态发生变化时的回调
checkChange(data, isChecked, childIsCheked) {
// 传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
this.$emit('checkChange', { data, isChecked, childIsCheked })
},
// 当前选中节点变化时触发的事件
currentChange(data, node) {
this.$emit('currentChange', { data, node })
},
// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
filterNodeMethod(value, data, node) {
if (!value) return true
return data[this.defaultProps.label].indexOf(value) !== -1
},
// 节点被展开时触发的事件
nodeExpand(data, node, el) {
this.$emit('nodeExpand', { data, node, el })
},
// 节点被关闭时触发的事件
nodeCollapse(data, node, el) {
this.$emit('nodeCollapse', { data, node, el })
},
// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
return this.$refs.myTree.getCheckedNodes(leafOnly, includeHalfChecked)
},
// 设置目前勾选的节点，使用此方法必须设置 node-key 属性
setCheckedNodes(nodes) {
this.$refs.myTree.setCheckedNodes(nodes)
},
// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
getCheckedKeys(leafOnly = false, includeHalfChecked = false) {
return this.$refs.myTree.getCheckedKeys(leafOnly, includeHalfChecked)
},
// 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
setCheckedKeys(keys, leafOnly = false) {
this.$refs.myTree.setCheckedKeys(keys, leafOnly)
},
// 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性
setChecked(keyordata, checked, deep = false) {
this.$refs.myTree.setChecked(keyordata, checked, deep)
},
// 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组
getHalfCheckedNodes() {
return this.$refs.myTree.getHalfCheckedNodes()
},
// 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
getHalfCheckedKeys() {
return this.$refs.myTree.getHalfCheckedKeys()
},
// 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
getCurrentKey() {
return this.$refs.myTree.getCurrentKey()
},
// 获取当前被选中节点的 data，若没有节点被选中则返回 null
getCurrentNode() {
return this.$refs.myTree.getCurrentNode()
},
// 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
setCurrentKey(key) {
this.$refs.myTree.setCurrentKey(key)
},
// 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
setCurrentNode(node) {
this.$refs.myTree.setCurrentNode(node)
},
// 设置 node-key 属性 (node) 待被选节点的 node getNode 根据 data 或者 key 拿到 Tree 组件中的 node
getNode(data) {
return this.$refs.myTree.getNode(data)
},
// 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性
remove(data) {
this.$refs.myTree.remove(data)
},
// 为 Tree 中的一个节点追加一个子节点
append(data, parentNode) {
this.$refs.myTree.append(data, parentNode)
},
// 递归拉平数据
recursion(arr) {
return [].concat(...arr.map(item => {
if (item[this.defaultProps['children']]) {
let arr = [].concat(item, ...this.recursion(item[this.defaultProps['children']]))
delete item[this.defaultProps['children']]
return arr
}
return [].concat(item)
}
))
},
// 获取拉平的treeData数据
getFlatData() {
let cloneData = JSON.parse(JSON.stringify(this.treeData))
return this.recursion(cloneData)
}
}
}
</script>
<style lang="scss" scoped>
.my-tree {
.search-input {
margin-bottom: 10px;
}
}
</style>
2.使用
<template>
<div class="tree-box">
<my-tree ref="myTree" :tree-data="treeData" icon-class="el-icon-star-on" :default-checked-keys="defaultCheckedKeys" :show-checkbox="true" :default-expanded-keys="defaultExpandedKeys" :highlight-current="true" :check-on-click-node="false" :default-props="defaultProps" @nodeClick="nodeClick" @checkChange="checkChange" @check="check"></my-tree>
<div class="info-box">
<p>当前选中：{{ chooseObj.name||'-' }}</p>
<p>当前勾选：{{ curChecks||'-' }}</p>
</div>
<div class="btn-box">
<el-button type="primary" @click="getCheckedNodes">根据node获取勾选项Id</el-button>
<el-button type="primary" @click="setCheckedNodes">根据node设置勾选三级 3-2-2</el-button>
<el-button type="primary" @click="getCheckedKeys">根据key获取勾选项Id</el-button>
<el-button type="primary" @click="setCheckedKeys">根据key设置勾选三级 3-2-2</el-button>
<el-button type="primary" @click="setChecked">勾选三级 3-1-1</el-button>
</div>
</div>
</template>
<script>
import MyTree from '../../components/MyTree/index.vue'
export default {
components: { MyTree },
data() {
return {
treeData: [{
id: 1,
name: '一级 2',
child: [{
id: 3,
name: '二级 2-1',
child: [
{
id: 4,
name: '三级 3-1-1',
child: [{
id: 8,
name: '四级 4-1-1'
}, {
id: 9,
name: '四级 4-1-2',
disabled: true
}]
},
{
id: 5,
name: '三级 3-1-2',
disabled: true,
child: [{
id: 10,
name: '四级 4-1-3'
}, {
id: 11,
name: '四级 4-1-4',
disabled: true
}]
}]
}, {
id: 2,
name: '二级 2-2',
disabled: true,
child: [{
id: 6,
name: '三级 3-2-1'
}, {
id: 7,
name: '三级 3-2-2',
disabled: true
}]
}]
}],
defaultExpandedKeys: [5],
defaultCheckedKeys: [9],
defaultProps: {
label: 'name',
children: 'child'
},
chooseObj: {},
checkInfo: {
checkObj: {
checkedNodes: [{ name: '四级 4-1-2' }]
}
}
}
},
computed: {
curChecks() {
if (this.checkInfo && this.checkInfo.checkObj) {
return this.checkInfo.checkObj.checkedNodes.map(item => item.name).join('、')
} else {
return ''
}
}
},
methods: {
// 节点被点击时获取选中项
nodeClick(obj) {
this.chooseObj = obj.data
},
// 节点选中状态发生变化时的回调
checkChange(obj) {
},
// 当复选框被点击的时候触发
check(obj) {
this.checkInfo = obj
},
// 根据node获取当前勾选项
getCheckedNodes() {
let checkArr = this.$refs.myTree.getCheckedNodes(true, true)
this.$message.success(`当前勾选id有：${checkArr.map(item => item.id).join('、')}`)
},
// 根据node设置目前勾选的节点
setCheckedNodes() {
this.$refs.myTree.setCheckedNodes([{
id: 7,
name: '三级 3-2-2',
disabled: true
}])
},
// 根据key获取当前勾选项
getCheckedKeys() {
let checkArr = this.$refs.myTree.getCheckedKeys(true, true)
this.$message.success(`当前勾选id有：${checkArr.map(item => item).join('、')}`)
},
// 根据key设置目前勾选的节点
setCheckedKeys() {
this.$refs.myTree.setCheckedKeys([7])
},
// 勾选三级 3-1-1
setChecked() {
this.$refs.myTree.setChecked(4, !this.$refs.myTree.getNode(4).checked)
}
}
}
</script>
<style lang="scss" scoped>
.tree-box {
width: 60%;
margin: 0 auto;
::v-deep .el-tree-node__expand-icon {
font-size: 16px;
}
}
</style>
3.重置样式
如若要对不同的一级二级节点设置不同的样式可以参考这样：
/* 一级节点样式 */
>.el-tree-node>.el-tree-node__content {
height: 44px;
font-size: 14px;
color: #333;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
background-color: #F5F5F7;
margin-bottom: 8px;
padding-left: 12px !important;
}
/* 二级节点样式 */
>.el-tree-node .el-tree-node .el-tree-node__content {
height: 34px;
font-size: 13px;
color: #444;
margin-bottom: 8px;
padding-left: 36px !important;
&:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #54B7AD;
border-radius: 50%;
margin-right: 8px;
}
}
/* 三级节点样式 */
>.el-tree-node .el-tree-node .el-tree-node .el-tree-node__content {
height: 30px;
font-size: 12px;
color: #444;
margin-bottom: 4px;
padding-left: 50px !important;
&:before {
display: none;
}
}