Web_TracerMethodology/components/tm-trees/tm-trees.vue

<template>
	<view class="tm-trees">
		<tm-trees-row v-for="(item,index) in options" 
			:option="item" 
			:openKeys="openKeys"
			:checkedKeys="checkedKeys"
			:parentCheck="parentCheckble"
			v-on:open-keys="openKeysHandle"
			v-on:checked-keys="checkedKeysHandle"
			:key="index"/>
	</view>
</template>

<script>
	/**
	 * 树形控件，支持多选
	 * 千里及
	 * 2021.2.1
	 * props: {
		 * options：树节点数据，
		 * defaultOpen：默认展开的项（节点key），
		 * defaultChecked：默认选中的项（节点key），
		 * open-keys：展开事件监听，会返回展开项的key，
		 * checked-keys：选中事件监听，返回选中项的key
		 * }
	 */
	export default {
		data() {
			return {
				openKeys: [],
				checkedKeys: [],
				checkedItems:[], //已勾选项
			};
		},
		props: ['options', 'defaultOpen', 'defaultChecked','parentCheckble'],
		created:function(){
			this.openKeys = this.defaultOpen || [];
			this.checkedKeys = this.defaultChecked || [];
		},
		watch: {
			defaultOpen: function(open) {
				this.openKeys = open;
			},
			defaultChecked: function(checked) {
				this.checkedKeys = checked;
			}
		},
		mounted() {
			// console.log('this.props',this.parentCheckble);
		},
		methods: {
			openKeysHandle: function(keys) {
				this.openKeys = keys;
				this.$emit('open-keys', keys);
			},
			checkedKeysHandle: function(keys,items) {
				this.checkedKeys = keys;
				
				const index = this.checkedItems.findIndex(item=>item.key == items.key);
				let _checkedItems = this.checkedItems;
				if(index != -1){
					_checkedItems.splice(index,1);
				}else{
					_checkedItems.push(items);
				}
				this.checkedItems = _checkedItems;
				
				this.$emit('checked-keys', keys,_checkedItems);
			}
		}
	}
</script>

<style lang="less">
	.tm-trees {
		width: 100%;
		height: 100%;
	}
</style>