解決：點選編輯時預警通知人（與科室下拉聯動）會閃一下Id再顯示漢字

.Tik發表於2024-12-02

表單：

        <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>

相關文章