vue使用element得el-tree树实现全选、反选、默认选择和输出选择的数据

全选、取消全选、反选、输出选择的值、设置默认值

<template>
	<div>
		<div class="tree-layout">
			<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
			<div class="tree">
				<el-tree
					:data="dataTree"
					ref="elTree"
					:props="channelProps"
					@check-change="checkChange"
					:default-expanded-keys="checkedData"
					:default-checked-keys="checkedData"
					default-expand-all
					:filter-node-method="filterNode"
					show-checkbox
					:indent="16"
					v-loading="upLowLoading"
					node-key="id"
					accordion
				></el-tree>
			</div>
		</div>
		<span slot="footer" class="dialog-footer dialog-tools">
			<el-button type="success" @click="checkAll">全选</el-button>
			<el-button type="info" @click="closeCheckAll">取消全选</el-button>
			<el-button type="warning" @click="inverse">反选</el-button>
			<el-button type="warning" @click="enterClick">确定</el-button>
		</span>
	</div>
</template>

<script>
export default {
	data() {
		return {
			filterText: "", // 过滤字段
			dataTree: [
				{
					id: 2,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "率料图严发每通比",
					tag: "色放",
					class: 0,
					num: 200,
					date: "1995-10-30 00:26:59",
					price: 76,
				},
				{
					id: 1,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "须八本目科管精间",
					tag: "方证决",
					class: 2,
					num: 824,
					date: "1970-03-05 11:00:19",
					price: 82,
				},
				{
					id: 3,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "战争子程证干率",
					tag: "指划究专群",
					class: 2,
					num: 875,
					date: "1980-10-03 13:44:03",
					price: 56,
				},
				{
					id: 4,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "间过教点地百思",
					tag: "山太意",
					class: 8,
					num: 511,
					date: "2018-10-25 08:34:45",
					price: 38,
				},
				{
					id: 5,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "知快才品件流热角图",
					tag: "发派定离",
					class: 4,
					num: 770,
					date: "1996-07-09 08:22:47",
					price: 86,
				},
				{
					id: 6,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "最记公应道它和",
					tag: "院几片交",
					class: 9,
					num: 738,
					date: "1972-12-26 10:09:36",
					price: 9,
				},
				{
					id: 7,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "属加石米流料厂铁",
					tag: "队根日备",
					class: 8,
					num: 398,
					date: "2007-08-27 14:36:35",
					price: 72,
				},
				{
					id: 8,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "则好始还政程海平",
					tag: "进美同",
					class: 10,
					num: 345,
					date: "1987-02-13 15:51:05",
					price: 41,
				},
				{
					id: 9,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "快命张包毛有",
					tag: "率委接",
					class: 6,
					num: 906,
					date: "1990-11-16 14:24:04",
					price: 39,
				},
				{
					id: 10,
					img: "http://dummyimage.com/'200x100'/#4A7BF7'/#fff'&text='pic'",
					children: [],
					title: "级大般件人料",
					tag: "八军习",
					class: 6,
					num: 631,
					date: "1987-08-19 18:27:25",
					price: 68,
				},
			], // 栏目初始数据
			channelProps: {
				label: "title",
				children: "children",
				isLeaf: "class",
				id: "id",
			},
			flag: false, // 属性是否选中标识
			upLowLoading: false, // 遮罩层
			currentCheckChannelId: "",
			checkedData: [1, 2],
		};
	},
	methods: {
        // 结点发生变化时的回调
		// eslint-disable-next-line no-unused-vars
		checkChange(node, checkStatus, childStatus) {
			if (checkStatus) {
				this.currentCheckChannelId = node.id;
			}
		},
		enterClick() {
            //已选中的数据
			console.log(this.$refs.elTree.getCheckedKeys());
		},
		// 节点过滤
		filterNode(value, data) {
			if (!value) return true;
            //注意这是data中channelProps中的一项
			return data.title.indexOf(value) !== -1;
		},
		// 全选或反选
		checkAll() {
			this.flag = true;
			this.$refs.elTree.setCheckedNodes(this.dataTree);
		},
		//取消反选
		closeCheckAll() {
			this.$refs.elTree.setCheckedKeys([]);
		},
		// 反选时处理方法
		batchSelect(nodes, refs, flag, seleteds) {
			if (typeof nodes != "undefined") {
				nodes.forEach((element) => {
					refs.setChecked(element, flag, true);
				});
			}

			if (typeof seleteds != "undefined") {
				seleteds.forEach((node) => {
					refs.setChecked(node, !flag, true);
				});
			}
		},
		// 反选
		inverse() {
			let res = this.$refs.elTree;
			let nodes = res.getCheckedNodes(true, true);
			this.batchSelect(this.dataTree, res, true, nodes);
		},
	},
	created() {},
	watch: {
		// 根据关键词过滤
		filterText(val) {
			this.$refs["elTree"].filter(val);
		},
	},
};
</script>

<style scoped></style>