Vue.js iView Cascader级联选择 知道叶子节点反向绑定

问题：

        在利用Vue.js和iView组件库设计网页时，使用到了Cascader级联选择，Cascader的data为Array，反向绑定出现问题

细节描述：

        使用到Cascader组件的界面既承担新建项目的功能，又承担编辑（修改）项目的责任，对于新建项目的过程，在提交时，将Cascader对应的属性进行如下操作，实现Array到string的需求。

this.relation.AuNo = this.relation.AuNo[this.relation.AuNo.length - 1]

        但在编辑功能时，我们需要将后台返回的数据（或者父组件props下来的值）绑定到Cascader上，让其处于被选择的状态，并disabled。在此过程中，我们获得值是string类型，但是Cascader接受data为Array类型。

相关组件及代码：

Cascader组件

<Cascader v-model="relation.AuNo" @on-visible-change="cascaderView" 
	@on-change="cascaderChange" :disabled="AuNoDis" 
	:data="auth" style="margin-top: 2px;width: 200px;"></Cascader>

script--data.return

data(){
    return{
	relation:{
	    AuNo: ''
	},
	RoleNoDis: false,
	PermissionNoDis: false,
	auth:[]  //这里用到一个getAuthList的ajax函数，暂不展示
    }
},

解决方案：

        假设有个用于级联结构的树，如图

        Cascader查找key为21的节点并展示，需要data为[2,21]，但我们从后台往往返回的时key=21，直接写入，Cascader并不能反向取绑定，这是需要我们遍历出路径，[2,21]即为Array类型。（ps：key必须唯一）

treeUtil.js ---- 自定义的tree遍历搜索函数集合

var auth = []; //路径
var depth = 0;  //树深度，从0开始
var isGo = true; //是否进行下一步

exports.SearchInit = SearchInit
//设置SearchInit
//为deepTraversalForSearch函数的前置条件
function SearchInit(){
	auth = [];
	depth = 0;
	isGo = true;
}

exports.deepTraversalForSearch = deepTraversalForSearch
//设置deepTraversalForSearch
//深度优先遍历--递归写法--用于搜索tree对应节点所在的路径

function deepTraversalForSearch(node,searchValue){
	console.log("depth ------- " + depth++)
	console.log("AuNo ------- " + node.AuNo + "--- searchValue---" + searchValue)
	auth.push(node.AuNo)
	let childrens=node.children;
	console.log("depth ------- " + depth)
    for(let i=0;i<childrens.length;i++){
    	deepTraversalForSearch(childrens[i],searchValue);
    	if(!isGo){
    		return auth
    	}
    }    
	            
    if(node!=null){
    	console.log("AuNo ------- " + node.AuNo)
    	console.log("AuNo --- bool ---- " + (node.AuNo === searchValue) )
    	if(node.AuNo === searchValue){
    		console.log("找到对应值 --- " + auth)
    		isGo = false
    		return auth
    	}else{
    		depth--;
    		auth.pop();
    	}
    }
}

相关调用代码

for(var i = 0; i<this.auth.length;i++){
	if(treeUtil.deepTraversalForSearch(this.auth[i],this.relation.AuNo)!== undefined){
		this.relation.AuNo = treeUtil.deepTraversalForSearch(this.auth[i],this.relation.AuNo)
		break;
	}
}

ps: 因为auth并没有一个统一的根节点(大概不是严格的树结构)，结构大概和上面图差不多，所以选择用for循环来遍历，如果查到就退出（break）

     还有，该函数执行最好在Cascader的data加载函数success中执行，实现同步效果。