解决:点击编辑时预警通知人(与科室下拉联动)会闪一下Id再显示汉字

表单:

复制代码
        <el-form-item label="通知人所在科室:" prop="ksdm">
          <el-select
            v-model="formData.ksdm"
            placeholder="请选择"
            style="width: 90%"
            clearable
            filterable
            @change="handleKsChange"
          >
            <el-option
              v-for="item in ksList"
              :key="item.ksdm"
              :label="item.ksmc"
              :value="item.ksdm"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警通知人:" prop="xm">
          <el-select
            v-model="formData.xm"
            v-if="xmList.length > 0"
            placeholder="预警通知人"
            style="width: 90%"
            clearable
            filterable
            @focus="getKsdm"
          >
            <el-option
              v-for="item in xmList"
              :key="item.id"
              :label="item.xm"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
复制代码
复制代码
    // 通过科室选择预警通知人
    handleKsChange(val) {
      this.formData.xm = '';
      this.xmList = [];
      this.getWarningXm(val);
    },
    // 提示用户先选择科室
    getKsdm() {
      if (!this.formData.ksdm) {
        this.$message({
          message: '请先选择通知人所在科室',
          type: 'warning'
        });
      }
    },
    // 根据科室获取预警通知人列表
    getWarningXm(val) {
      noticeSet
        .getWarningNotifier({
          action: 'getWarningNotifier',
          yljgdm: userAuth.getToken().yljgdm,
          ksdm: val
        })
        .then((res) => {
          if (res.data.success) {
            this.xmList = res.data.data;
          }
        });
    },
复制代码

方案一:延迟设置 formData.xm 的值

确保 getWarningXm 完成后再设置 formData.xm 的值。你可以在获取到 xmList 数据后再设置 formData.xm

复制代码
// 编辑按钮
async edit(row) {
  console.log('row :', row);
  // 获取 xmList 数据
  await this.getWarningXm(row.ksdm);
  
  // 设置 formData
  this.formData = {
    id: row.level_note_id,
    ksdm: row.ksdm,
    xm: row.id, // 此时 xmList 数据已加载,可以设置
    level: row.level.split(',').map((levelStr) => {
      const levelItem = this.levelList.find(
        (item) => item.level === levelStr
      );
      return levelItem ? levelItem.id : null;
    }),
    status: row.status
  };

  this.getDepartmentInfo();
  this.getWarningLevel();
  this.dialog.title = '编辑';
  this.dialog.visible = true;
}
复制代码

方案二:使用 watch 监听 formData.xm 的变化

如果你已经在异步加载 xmList 后才更新 formData.xm,你可以使用 watch 来监控 xmList 加载完成后自动更新 formData.xm

watch: {
  xmList(newList) {
    if (newList.length > 0 && !this.formData.xm) {
      // 确保 formData.xm 在 xmList 加载完成后更新
      this.formData.xm = this.xmList.find(item => item.id === this.formData.xm)?.id || null;
    }
  }
}

方案三:使用 v-if 或 v-show 等待数据加载

可以通过 v-ifv-show 控制 el-select 组件的渲染,直到 xmList 数据加载完毕。

复制代码
<el-form-item label="预警通知人:" prop="xm">
  <el-select
    v-if="xmList.length > 0"  <!-- 等待 xmList 数据加载完成 -->
    v-model="formData.xm"
    placeholder="预警通知人"
    style="width: 90%"
    clearable
    filterable
    @focus="getKsdm"
  >
    <el-option
      v-for="item in xmList"
      :key="item.id"
      :label="item.xm"
      :value="item.id"
    ></el-option>
  </el-select>
</el-form-item>
复制代码

 

posted @   .Tik  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示