import search from './components/search/index.vue' export default { name: "tree", props: { trees: { type: Array, default: () => { return [] } }, //是否开启选中 isCheck: { type: Boolean, default: () => { return false } }, parent:{ type: Boolean, default: () => { return false } }, max:{ type: Number, default: () => { return '-1' } }, checkList: { type: Array, default: () => [] }, parentList: { type: Array, default: () => [] }, searchIf: { type: Boolean, default: () => true }, props: { type: Object, default: () => { return { label: 'name', children: 'children', multiple: false, checkStrictly: false,//不关联 } } } }, data() { return { isEnd: false, categoryCode: '', pageIndex: 1, isre: false, tree: this.trees, newNum: 0, oldNum: 0, allData: this.trees, tree_stack: [1], parent_data: this.parentList||[],//选择父辈 searchResult: [], tochild: false, newCheckList: this.checkList, scrollLeft: 999, nodePathArray: [] } }, /* * 已兼容h5和小程序端,其它端没测试过,估计问题不大,只需要改一下传值的方式 * * 如有问题可以加qq:122720267 * * 使用该插件的朋友请给个好评,或者到git start一下 * git地址:https://github.com/LSZ579/xiaolu-tree-plugin.git * 插件市场地址: https://ext.dcloud.net.cn/plugin?id=2423 * */ components: { search }, mounted() { if(this.props.multiple&&this.props.checkStrictly){ if(this.newCheckList.length!=0){ this.checkAllChoose(); return } for(let i = 0; i0) { this.getNodeRoute(this.allData,this.newCheckList[0].id) let arr = this.nodePathArray.reverse() if(arr.length == 0)return this.tree_stack = this.tree_stack.concat(arr); this.tree = this.tree_stack[this.tree_stack.length-1].children; } }, methods: { getList() { this.pageIndex += 1 this.$http.Material({ categoryCode: this.categoryCode, pageIndex: this.pageIndex, pageSize: 20 }).then(res => { console.log(res) if(res.code === 0) { if(res.result.isLastPage) { this.loadStatus = "nomore" }else { this.loadStatus = "loadmore" } let array = res.result.list array.forEach(item => { item.children = [] item.user = true }) this.tree.push(...array) } }) }, //多选 async checkboxChange(item, index, bx, qx) { var that = this; if(!this.props.multiple) return; let findIdex = that.newCheckList.findIndex(e=>{return item.id==e.id}); if (findIdex>-1) { //反选 if (that.props.checkStrictly) {//关联子级 if (item.user) {//用户 that.newCheckList.splice(findIdex,1) } else {//非用户,取消所有下一级 that.getIdBydelete(item.children) } } else { that.newCheckList.splice(findIdex,1) } } else { //选中 if (!item.user&&that.props.checkStrictly) {//选中下一级 if(qx||bx){//取消下级 await that.getIdBydelete(item.children); item.qx = 0;item.bx = 0; } else{ item.qx = 1;item.bx = 0; await that.chooseChild(item.children,item.id); } that.$emit('sendValue', that.newCheckList); that.$forceUpdate() return } // if(item.user&&this.props.checkStrictly) this.getNodeRoute(this.allData,item.id); that.newCheckList.push({...item}); } that.$emit('sendValue', that.newCheckList) }, // 取消下一级的选中 getIdBydelete(arr) { arr.forEach(e=>{ if(e.user){ for(var i = 0; i { if(res.code === 0) { if(res.result.isLastPage) { this.loadStatus = "nomore" }else { this.loadStatus = "loadmore" } this.tree = res.result.list this.tree.forEach(item => { item.children = [] item.user = true }) } }) } else { if(item.user) return var that = this; this.tochild = true; let children = that.props.children; if (!item.user && item[children].length > 0) { that.tree = item[children]; if (that.tree_stack[0].id == item.id) { that.tree_stack.push(item); } else { console.log('??????') that.tree_stack.push(item); console.log(that.tree_stack) } } this.$nextTick(() => { this.scrollLeft += 200; }) if(this.props.checkStrictly) this.checkAllChoose(); this.$forceUpdate() } }, //搜索 confirmSearch(val) { // this.searchResult = [] // this.search(this.allData, val) this.isre = true this.tree_stack.splice(1, 6666) // uni.showLoading({ // title: '正在查找' // }) // setTimeout(() => { // this.tree = this.searchResult // uni.hideLoading() // }, 300) this.pageIndex = 1 this.$http.Material({ key: val, pageIndex: this.pageIndex, pageSize: 20 }).then(res => { if(res.code === 0) { this.tree = res.result.list this.tree.forEach(item => { item.children = [] item.user = true }) } }) }, search(data, keyword) { var that = this let children = that.props.children for (var i = 0, len = data.length; i < len; i++) { if (data[i].name.indexOf(keyword) >= 0) { that.searchResult.push(data[i]) } if (!data[i].user && data[i][children].length > 0) { that.search(data[i][children], keyword) } } }, checkAllChoose(){ let o = false,t = true; this.tree.forEach((e,i)=>{ if(!e.user){ e.qx = o; e.bx = o; let num2 = this.computAllNumber(e.children); // console.log(this.newNum,this.oldNum) if(this.newNum!=0&&this.oldNum!=0){ if(this.newNum==this.oldNum) { e.qx = t;e.bx = o; }else{ e.qx = o;e.bx = t; } } if(this.newNum!=0&&this.oldNum == 0){ this.$set(this.tree[i],'bx',o); this.$set(this.tree[i],'qx',o); } this.$forceUpdate() this.newNum=0 this.oldNum=0 } }) }, computAllNumber(arr) { for(let j = 0; j 2) { that.tree_stack.forEach((item, i) => { if (i > index) { that.tree_stack.splice(i, max) } }) } else if (index == that.tree_stack.length - 1) { } else { that.tree_stack.splice(that.tree_stack.length - 1, 1) } that.tree = item[that.props.children] } if(this.props.checkStrictly) this.checkAllChoose(); this.$forceUpdate() }, backConfirm(){ // console.log(this.newCheckList) if(this.newCheckList[0]) { this.$emit('sendValue',this.newCheckList,'back') } } } }