【无标题】

最新推荐文章于 2025-07-29 20:25:09 发布

Daisy_ls

最新推荐文章于 2025-07-29 20:25:09 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/Daisy_ls/article/details/129562517

实现下图的级联选择器，基本用法官网上都有的，我这里记录一下，选好之后保存，然后打开能取到数据的过程。

一、选取数据

HTML:

<el-form-item label="督察类别：" style="margin-left: 150px;">
     <el-cascader :options="supervisionTypeOptions" style="width:100%" clearable></el-cascader>
</el-form-item>

data基本结构：

supervisionTypeOptions: [
                { value: '重点科室', label: '重点科室', children: [{ value: 'aaa', label: 'aaa' }] },
                { value: '重点部位', label: '重点部位', children: [{ value: 'aaa', label: 'aaa' }] },
                { value: '重点人群', label: '重点人群', children: [{ value: 'aaa', label: 'aaa' }] },
            ],

这里由于督察类别下重点科室的子项是从接口获取的，所以，这里的数据就需要我自己去拼接，具体的实现方式如下：

//查询并展示所有科室
 Req.GetDepartmentAsync().then(res => {
     if ((res.data || []).length > 0) {
         // 拼接至督察类别
         this.supervisionTypeOptions[0].children = []
         res.data.forEach(item => {
             this.supervisionTypeOptions[0].children.push({ value: item.departmentCode, label: item.departmentName });
          });
      }
});

拼接好之后，我就可以在打开Cascader 时，能展示（选择）里面的数据。

二、保存数据

数据已经拿到之后，就需要点击保存，能存到数据库，做存储之前先看后端需要的数据结构，再找方法。

不难看出，后端要的数据挺多，其中红框才是督察类别这一栏需要传过去的数据，接下来就是怎么拿到这些值并传给后端了。

首先，取值=> 用到的方法是： @change="handleChange($event)" 配合 ref="superRef" 才能取到选中的 value 和 label 值（后面获取 controlQualityDeptCode、 controlQualityDeptName、 controlQualityCategoryCode、 controlQualityCategoryName 都是用类似的方）也就是这里的 departmentCode 和 departmentName

<el-cascader :options="supervisionTypeOptions"  ref="superRef"
      @change="handleChange($event)" style="width:100%" clearable></el-cascader>

 // 拿到cascader里所选中值的value和label及督察类别supervisionType
handleChange(row) {
    const checkedNode = this.$refs["superRef"].getCheckedNodes();
    console.log(checkedNode); // 级联选择器所选的内容

    console.log(row); // 所选的 内容
    this.addForm.supervisionType = row[0];
    this.addForm.departmentCode = checkedNode[0].value;
    this.addForm.departmentName = checkedNode[0].data.label;
},

接下来就是保存了，拿到值之后，就要把这些值保存到接口中

/**
* 保存新增感染质量控制信息
*/
AddContorlData() {
    this.addForm.CreateBy = this.userCode
    Req.AddControlQualityScoreInfo(this.addForm).then(res => {
        if (res.status == 200) {
            this.$message({ type: 'success', message: '保存成功!' });
            this.GetTabData();
            this.isDisabled = true;

            this.searchildForm.controlQualityDeptCodeSearch = this.addForm.controlQualityDeptCode;       // searchildForm里的两个code 需要单独赋值，否则和上面的addForm里的重点科室会联动起来
            this.searchildForm.controlQualityCategoryCodeSearch =this.addForm.controlQualityCategoryCode;
            this.GetQualityList();

         } else {
               this.$message({ type: 'error', message: '保存失败!' });
         }
     })
},

三、读取数据

数据保存后，打开编辑窗口，应该能看到保存的数据，级联选择器就需要设置一个 v-model 用来存储数据，v-model="selectedSupervisionType" 然后在需要取值的地方设置 this.selectedSupervisionType =["重点科室","aaa"];

<el-cascader :options="supervisionTypeOptions" v-model="selectedSupervisionType"  ref="superRef"
  @change="handleChange($event)" style="width:100%" clearable></el-cascader>

data() {
    return{
         selectedSupervisionType: [], //cascader 选中的值
    }
},
methods:{
     /**
      * 打开编辑窗口
     */
     OpenEditWin(data) {
         this.addForm = data;
         this.searchildForm.controlQualityDeptCodeSearch = data.controlQualityDeptCode;       // searchildForm里的两个code 需要单独赋值，否则和上面的addForm里的重点科室会联动起来
         this.searchildForm.controlQualityCategoryCodeSearch =data.controlQualityCategoryCode;
         this.changeDeptName('');     // 调用上面的方法 以此来获取编辑框里的项目类别的值
         this.selectedSupervisionType =[data.supervisionType,data.departmentCode]; // cascader 选中的值
         //查询并展示所有科室
         Req.GetDepartmentAsync(data).then(res => {
             if ((res.data || []).length > 0) {
                 this.supervisionTypeOptions[0].children = []
                 res.data.forEach(item => {
                     this.supervisionTypeOptions[0].children.push({ value: item.departmentCode, label: item.departmentName });
                  });
              }
          });
      this.userCode = window.sessionStorage.getItem("userCode");
      this.GetQualityList();
      this.isDisabled = true;
   },
}

此时再打开编辑页面就能看到保存时选择的数据了。