解决：点击编辑时预警通知人（与科室下拉联动）会闪一下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-if 或 v-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>