实习日记 5/17

todolist：

• 力扣两道题 (上午完成了一道题)
• 看项目代码
• 完成开发任务

记录：给之前做的密钥对添加下拉框，从后端获取并显示出来

import http from './httpInstance';

export default {
  deleteKey: id => http.post(`/secureshell/v1/keypairs/${id}/delete`),
  createKeyPair: data => http.post('/secureshell/v1/keypairs/create', data),
  getKeyPair: params => http.get('/secureshell/v1/keypairs/pageable', { params })  //下拉
};

记住，这个文件要引入到组件里面去，并且是全部暴露，所以

import keyPair from '@/api/keyPair';  //引入的时候是全部暴露，所以要调用文件里的方法时要用keyPair.getkeyPair 

具体代码：

   <el-form-item label=""
                        prop="keyPairId">
            <el-select :placeholder="$t('instance.pleaseSelect')"
                       v-model="form.keyPairId"
                       class="step-input">
              <el-option v-for="item in keyPairData"
                         :key="item"
                         :label="item"
                         :value="item"> </el-option>
            </el-select>
            <template>

不要忘记还要再data里面定义keyPairData。。。 

/* 获取密钥 */
    getkeyPair () {
      let params = {
        regionId: this.formData.regionId,
        zoneId: this.formData.zoneId,
        pageNo: 1,
        pageSize: 9999
      };
      keyPair.getKeyPair(params).then(({ data }) => {
        this.keyPairData = data.rows.map(item => {
          return item.name;  //用map处理一下数据
        });
      })
        .catch(() => { })
        .finally(() => { });
    },

定义了获取方法还要调用，那么是在可用区发生变化的时候改变所以再监听属性里面调用

watch: {
    'formData.osType' (value) {
      // 实例名称为hecs-W(windows镜像)1612669452（UNIX时间戳）
      value &&
        this.form.instanceName &&
        (this.form.instanceName = `hecs-${value[0].toLocaleUpperCase()}${new Date().getTime()}`);
    },
    'formData.backupId' (value) {
      // 实例名称为hecs-W(windows镜像)1612669452（UNIX时间戳）
      value &&
        this.form.instanceName &&
        (this.form.instanceName = `hecs-B${new Date().getTime()}`);
    },
    'formData.regionId' (value) {
      this.getkeyPair();  //当value值发生改变的时候调用函数
    }
  },