级联选择器与select选择器--element

如果遇到级联单选,选择这一项的时候需要拿到这一项的全部数据,而不只是id的集合,该如何拿到呢?

<el-form-item label="分公司:" prop="branchCode" required>
          <el-cascader
            style="width: 232px"
            ref="transfer2"
            collapse-tags
            :show-all-levels="false"
            v-model="ruleForm.branchCode"
            :options="customerOptions"
            :props="{
              multiple: false,
              checkStrictly: true,
              emitPath: false,
              value: 'value',
              label: 'name',
              children: 'children',
            }"
            clearable
            @change="cascaderChange($event, 'branchCode')"
          ></el-cascader>
</el-form-item>
// 级联选择器选择的时候
    cascaderChange(e, p) {
      if (p == "branchCode") {
        let valueChoose = this.$refs["transfer2"].getCheckedNodes(false);
        if (valueChoose) {
          this.ruleForm.branchName = valueChoose[0].label;
          this.ruleForm.branchCode = valueChoose[0].value;
          getChildDeptTree(valueChoose[0].value).then((res) => {
            if (res.data.code == 0) {
              this.businessList = res.data.data;
            }
          });
        }
      } 
    },

如果级联选择器多选的时候,点击选择的时候,却没有反显在选择框里面,先观察一下是不是数据的问题,有的是后台数据给children返回的是[],我们需要循环遍历,将其改为Null

<el-form-item label="组织机构" prop="deptIds">
        <el-cascader
          ref="transfer2"
          collapse-tags
          v-model="queryParams.deptIds"
          :options="customerOptions"
          :props="{
            multiple: true,
            emitPath: false,
            checkStrictly: false,
            value: 'value',
            label: 'name',
            children: 'children',
          }"
          clearable
        ></el-cascader>
      </el-form-item>
// 处理部门树的数据
    handleTreeData(list) {
      list.forEach((element) => {
        if (!element.children.length) {
          element.children = null;
        } else {
          this.handleTreeData(element.children);
        }
      });
    },

select选择器,选择某一项时,如何拿到整条数据对应的这一项?

<el-select
          v-model="queryParams.provinceCode"
          placeholder="省"
          @change="selectChange('province', 'search', $event)"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
// 选择值改变的时候
    selectChange(p, p1, e) {
      if (p == "province") {
        getCityList(e).then((res) => {
          this.cityList = res.data.data;
        });
      } else if (p == "city") {
        getdistrictList(e).then((res) => {
          this.districtList = res.data.data;
        });
      }
      if (p1 == "add") {
        if (p == "province") {
          const selectedItem = this.provinceList.find(
            (item) => item.code === e
          );
          this.ruleForm.province = selectedItem.name;
        } else if (p == "city") {
          const selectedItem = this.cityList.find((item) => item.code === e);
          this.ruleForm.city = selectedItem.name;
        } else if (p == "district") {
          const selectedItem = this.districtList.find(
            (item) => item.code === e
          );
          this.ruleForm.district = selectedItem.name;
        }
      }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容