elementui Cascader 级联选择器的使用总结

实现效果

 技术要点总结如下：

 1、点击添加自动增加多行，实现自主选择增加多条节点数据

 2、节点地址使用的是Cascader 级联选择器，需要动态生成，涉及到一个技术要点是：因v-modal只能获取value不能获取label，故需要解决在多个动态生成的Cascader 分别获取他们选中的label和value,

---

 

下面开始展示相关代码：

html:

 
      
        
          
            添加
          
          
            删除
          
        
        
          
          
          
            
          
          
            
           
        
      
      

        确 定
        取 消
      
    
js:

handleChange(index){
  var that=this
  var name='cascader'+index
//this.valueNode[index] 对应的是省市区的id  nameArr对应的是省市区的name
  var nameArr=this.$refs[name].getCheckedNodes()[0].pathLabels
  that.$nextTick(function () {
    that.platCarLineDetailList[index].nodeAddress=nameArr
    console.log(that.platCarLineDetailList,that.valueNode)
    that.$forceUpdate()
  })
},
/** 车线详情添加按钮操作 */
handleAddPlatCarLineDetail() {
  var that=this
  that.$nextTick(function () {
    let obj = {};
    obj.nodeName = "";
    obj.nodeAddress = ""; 
    that.valueNode.push([])//在data中定义格式为[[]]
    that.platCarLineDetailList.push(obj); 
    that.$forceUpdate()
  })
},
/** 车线详情删除按钮操作 */
handleDeletePlatCarLineDetail() {
  if (this.checkedPlatCarLineDetail.length == 0) {
    this.$modal.msgError("请先选择要删除的车线详情数据");
  } else {
    const platCarLineDetailList = this.platCarLineDetailList;
    const valueNode = this.valueNode;
    const checkedPlatCarLineDetail = this.checkedPlatCarLineDetail;
    this.platCarLineDetailList = platCarLineDetailList.filter(function(item) {
      return checkedPlatCarLineDetail.indexOf(item.index) == -1
    });
    this.valueNode = valueNode.filter(function(item,indexV) {
      var num=indexV+1
      return checkedPlatCarLineDetail.indexOf(num) == -1
    });
 
  }
},

---

 代码解释