el-cascader 使用

//前端代码
<el-cascader
    v-model="mtclassList"
     :options="materielCategoryVOs"
     placeholder="请选择"
     change-on-select
     clearable
     :show-all-levels="false">
 </el-cascader>
 // 如果后端返回的是 用","分隔开的id 如 "123456,654221" 就进行分割赋值就可以回显        
this.mtclassList = this.form.mtclassIds != null && this.form.mtclassIds.length > 0 ? this.form.mtclassIds.trim().split(",") : [this.form.mtclassId];

// 初始化赋值事件
selectTypeList: function () {
		//this.$_Axios 这个是封装的请求方法
        this.$_Axios('method', 'url', params, (status, result, errMsg) => {
          if (status) {
            //初始化采购分类
            if (result.materielCategoryVOs != null) {
              let classList = [];
              // materielCategoryVOs 是后台处理过后的返回数据 处理完的数据类型就是联级下拉框
              // 将处理过的List数据拼接起来给联级下拉框即可
              result.materielCategoryVOs.forEach((item,index)=>{
                classList.push({"children": item.children ,"value": item.value, "label": item.label})
              })
              //materielCategoryVOs 联级下拉框
              this.materielCategoryVOs = classList

            }
          }
        })
      }

记录问题方便使用

你可能感兴趣的:(Vue,Element-ui)