Ztree组件 支持全选 和反选不影响父级

	"@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>