demand

In recent development, a requirement was encountered:

  1. When you click on a button,cascaderA specific value needs to be selected;
  2. When the value changes, you need to get the selected valuelabelandvalueAssigns values to form data.

Thinking and pit

  1. The default value: Check are you hungry file, foundcascaderThe default value ofvalue/v-modelTo bind, but without specifying the data type to bind. After usingBaidu dafa is goodFinally know, itsTo bind an array that contains all of the data and its parent nodes to be selectedlabelValues (note that they are sorted in order, the selected value is the last one)
  2. To obtainlabelandvalue: YeschangeEvent, cooperategetCheckedNodesEvent to get
  3. In the data returned by the back endidandname, can be accessed throughProp propertiesTo configure thelabelandvalue.

Code implementation

<template>
  <div>
    <el-button type="primary" @click="getCascaderValue"
      ></el-button ><br />
    <el-form ref="form" :model="form">
      <el-form-item>
        <el-cascader
          clearable
          v-model="defaultCascaderValue"
          :show-all-levels="false"
          :options="allOptions"
          :props="myProp"
          @change="getvalue"
          class="myCascader"
          ref="myCascader"
        >
        </el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>
Copy the code
<script>
export default {
  name: "Cascader".data() {
    return {
      form: {},
      allOptions: [].// Total data
      defaultCascaderValue: []./ / the default value
      myProp: { / / configuration items
        value: "id".label: "name".checkStrictly: true.// Allow any section to be selected}}; },methods: {
    // Get the label values of all the parent nodes of an item
    getDefaultCasderValues(str, arr) {
      let _this = this // Save this for recursive use
      let initArr = arr;
      let testArr = [];
      / / recursion
      function test(str, arr) {
        for (var item of arr) {
          if( item.id ! == str &&Array.isArray(item.children) &&
            item.children.length > 0
          ) { // forward recursive
            test(str, item.children);
          } else if (item.id === str) {
            testArr.unshift(item.id);
            // Here we need to assign a value to the form, so that the form does not get data the first time it is selected by default
            const { id: orgid, name: org } = item;
            _this.form = { orgid, org };
            if(item.pId ! = ="1") { // Stop recursion at level 0
              test(item.pId, initArr);
            } else {
              return;
            }
          }
        }
      }
      test(str, arr);
      return testArr;
    },
    getCascaderValue() {
      this.$api.getCascaderValue().then((res) = > {
        this.allOptions = res.data;
        // The '4' here is the data management department ID value, can be upgraded to a dynamic value
        this.defaultCascaderValue = this.getDefaultCasderValues(
          "4".this.allOptions
        );
      });
    },
    getvalue() {
      if (this.defaultCascaderValue.length > 0) { // When you click clear, the change event will also be triggered to avoid errors. First check whether there is a value to get the selected node
        const { label: org, value: orgid } =
          this.$refs.myCascader.getCheckedNodes()[0];
        this.form = { org, orgid };
      }else{
        this.form = {}
      }
    },
  },
};
</script>
Copy the code

The effect




If there are mistakes, welcome to correct; If you have any questions, please leave a comment.