"@ztree/ztree_v3": "^3.5.46",
main.js
import '@ztree/ztree_v3/js/jquery.ztree.core.js'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
vue.config.js
const path = require('path')
const FileManagerWebpackPlugin = require('filemanager-webpack-plugin')
const webpack = require('webpack')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
runtimeCompiler: true,
devServer: {
host: 'localhost', // can be overwritten by process.env.HOST
port: 9528,
overlay: {
warning: false,
errors: false
}
},
lintOnSave: false,//eslint 语法规范关闭
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
},
chainWebpack: (config) => {
config.resolve.alias.set('@', resolve('src'))
// config.resolve.alias.set('vue$', resolve('vue/dist/vue.esm.js'))
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.plugins.delete('pwa')
config.plugins.delete('workbox')
},
productionSourceMap: false,
publicPath: './'
}
ztree 组件代码
<template>
<!-- 角色管理权限树组件 -->
<div class="areaTree">
<ul id="treeDemo" class="ztree"></ul>
</div>
</template>
<script>
import RoleApi from '@/api/account/roleAccount' //API
export default {
name: 'RoleTree',
data() {
return {
setting: {
view: {
showIcon: false, //不显示图标
showLine: false // 是否显示节点之间的连线
},
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pid',
rootPId: 0
}
},
check: {
enable: true,
autoCheckTrigger: true,
chkboxType: { Y: 'ps', N: 's' }
},
callback: {
onCheck: this.onCheck, // 节点点击事件
}
},
zNodes: [],
id: '',
funcIdData: [],
pageType: '', //操作类型
userType: 1 //用户类型
}
},
// inject: ['row', 'type'],
props: ['type', 'row', 'page'],
mounted() {
this.pageType = this.page
this.id = this.row == {} ? '' : this.row.id
this.userType = Number(this.type)
if (this.pageType === 'edit') {
this.loadData(this.id)
} else {
this.getFunctions()
}
},
methods: {
// 获取详情
loadData(id) {
let _this = this
RoleApi.detail({ id: id }).then((res) => {
if (res.roleId == null && res.id == 3) {
res.roleId = 3
}
if (res.roleId == null && res.id == 2) {
res.roleId = 2
}
this.funcIdData = res.idList
this.getFunctions()
})
},
getFunctions() {
RoleApi.fun({ roleId: 1, userType: this.userType }).then((res) => {
this.zNodes = res.list
// 整理数据
this.zNodes.forEach((element) => {
if (element.funcs) {
element.children = element.funcs
element.funcs.forEach((item) => {
item.children = item.funcs
item.funcs.forEach((obj) => {
obj.children = obj.funcs
})
})
}
})
//回显设置
if (this.funcIdData) {
this.$nextTick(() => {
// 展开全部节点
var treeObj = $.fn.zTree.getZTreeObj('treeDemo')
// treeObj.expandAll(true);
this.funcIdData.forEach((value) => {
treeObj.checkNode(treeObj.getNodeByParam('id', value), true)// 回显选中的数据
var node = treeObj.getNodeByParam('pid', value)
if (node) {
var parent = node.getParentNode()
if (!parent.open) {
treeObj.expandNode(parent, true, false) // 展开选中节点
}
}
})
window.scrollTo(0,0);//滚动条默认滚动到最上面
})
}
this.init()
})
},
init() {
//展示
$.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes)
},
onCheck(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeId),
nodes = treeObj.getCheckedNodes(true),
v = []
for (var i = 0; i < nodes.length; i++) {
v.push(nodes[i].id)
// console.log() //获取选中节点的值
}
this.funcIdData = v
this.$emit('callBack', this.funcIdData) //回传选中值
},
},
created() {}
}
</script>
<style lang="scss" scoped>
.areaTree {
height: auto;
max-height: 200px;
width: 100%;
overflow: auto;
}
</style>