elementUI Cascader 级联选择器获取数据信息

官方API： http://element-cn.eleme.io/#/zh-CN/component/cascader 

<el-cascader :options="goodsOptions" v-model="selectedOptions" @change="handleChange()" :props="defaultData" size="mini" style="width: 300px"></el-cascader>

//goodsOptions为渲染数据
//defaultData:{   //联级选择
    value: 'id',
    label: 'name',
    children: 'class'
 },

 

function getCascaderObj(val,opt) {
    return val.map(function (value, index, array) {
      for (var itm of opt) {
        // console.log(opt)
        if (itm.id == value) { opt = itm.class; return itm; }
      }
      return null;
    });
  }

this.vals=getCascaderObj(this.selectedOptions, this.goodsOptions);

为调用上面的方法，这里打印opt看看数据，数据是不一样的。自己适配value和class

 

 //  联级选择商品
        async handleChange(){
          this.vals=getCascaderObj(this.selectedOptions, this.goodsOptions);
          this.vals.map(item=>{
            this.name = item.name;
            this.id = item.id
          })
        },
        addGodds(){
          console.log(this.goodsData)
          let result = this.goodsData.some(item=>{
            if(item.id == this.id){
              return true;
            }
          });
          if(result){
            this.$notify({
              type:'warning',
              message:'该商品已存在，请重新选择！',
              title:'警告'
            })
          }else{
            this.goodsData.push({
              id:this.selectedOptions.pop(),
              name:this.vals[this.vals.length-1].name,
            });
            this.ids.push(this.id )
          }
          this.selectedOptions = []
        },
        async deleteRow(index, rows) {
          await rows.splice(index, 1);
          this.ids = [];
          await rows.map(item=>{
            this.ids.push(item.id)
          })
        },