Element-ui组件之Cascader 级联选择器

1. 后台需求只存最后一级value

<el-cascader placeholder="请输入" 
          filterable 
          clearable
          :props="{emitPath:false}"
          :options="xxList"
          v-model="xxValue"
          ref="cascaderXX"
          @change="getCasLabel">
</el-cascader>

参数	说明	类型	可选值	默认值
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	boolean	-	true

2. 如果同时需求label值

onSelectIndustry () {
	this.form.industryName = this.$refs.industryRef.getCheckedNodes()[0].pathLabels[(this.$refs.industryRef.getCheckedNodes()[0].pathLabels.length) - 1]
},

3. 回显问题

• 后台只返回最后一级的ID
• 查询的总表写在前端

    // 根据返回的所属行业id，查找到对应的上级
    // item是编辑时候回填的最后一级id，parent是本地的数组
    getIndustryParentById (item, parent) {
      parent.map(function (value) {
        const res = value.children.find(x => x.value === item.industryType - 0)
        if (res) {
          // [父级id,子级id]
          return [value.value, res.value]
        }
      }).forEach((subItem) => {
        if (subItem) {
          this.form.industryType = subItem
        }
      })
    },