element 级联选择器-Cascader

element级联选择器空数据

导致空数据的原因是因为children:[]

所以应该对后台返回的数据做2次处理 过滤掉

代码如下

this.$axios.get("office/officeTree").then(({ data }) => {
    let dataValueBatch = data =>
    data.map(({ assocId, name, children, isParent, id }) =>
             children.length
             ? {
        value: assocId,
        label: name,
        children: dataValueBatch(children)
    }
             : isParent === 3
             ? { value: id, label: name }
             : {
        value: assocId,
        label: name
    }
            );
    this.options = dataValueBatch(data);
});

//这个还额外对第三级的数据进行不同值的绑定

级联选择器重新赋值 选择不中指定的值

<template>
  <div>
    <el-dialog title :visible.sync="dialogVisible" width="30%">
      <el-cascader
        v-if="dialogVisible"  //关键代码 跟随弹框 重置级联选择器
        v-model="ValidateForm.value"
        :options="options"
        @change="test"
      ></el-cascader>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <div class="box">
      <div class="button" type="primary" @click="changeValue">改变</div>
      <div class="button" type="primary" @click="changeValue2">改变2</div>
    </div>
  </div>
</template>

级联选择只返回选中节点的值,不返回数组

 <el-form-item label="年级/班级" prop="class_id">
 	 <el-cascader :options="classData" v-model="formData.class_id" :props="modifyProps">
     </el-cascader>
</el-form-item>

<script>
//级联选择器配置    
modifyProps: {
    value: "id",
    label: "name",
    emitPath: false  # 关键代码,设置后可通过选中的单值进行回填,注意id不能重复
},
</script>