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>