(2020.10.20) - 记录-CSDN博客

本文链接：https://blog.csdn.net/hzm_csdn/article/details/127436031

本文展示了在Vue.js应用中如何处理数据数组中的重复元素，通过`addHostFn`方法添加主机信息时避免ID重复。同时详细介绍了如何利用`v-for`指令动态渲染表单，以及`deleteHostFn`方法删除主机信息，`hostDetailsFn`接收并处理主机详情数据。此外，还涉及了根据系统环境选择禁用选项的逻辑`systemCaseOptDisabled`。

摘要由CSDN通过智能技术生成

1. 遇到的问题是: 给data里声明的数组直接push(id)元素,导致数组里面出现重复的数据id

解决:

2.问题: 要实现的效果如下:

        <div v-for="(elem, index) in form.systemHostVos" :key="index.id">
          <el-row>
            <el-col :span="6">
              <el-form-item label="系统环境" prop="systemCase">
                <el-select
                  v-model="elem.systemCase"
                  placeholder="请选择系统环境"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in caseList"
                    :label="item.dictDataName"
                    :value="item.dictDataName"
                    :key="item.id"
                    :disabled="systemCaseOptDisabled(item.dictDataName)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="系统使用状态" prop="systemStatus">
                <el-input
                  v-model="elem.systemStatus"
                  placeholder="请输入系统使用状态"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="访问URL" prop="visitUrl" label-width="70px">
                <el-input v-model="elem.visitUrl" placeholder="请输入访问URL" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="20">
              <el-form-item label="长域名" prop="cdomain" label-width="60px">
                <el-input v-model="elem.cdomain" placeholder="请输入长域名" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="10">
              <el-form-item label="备注" prop="remark" label-width="60px">
                <el-input v-model="elem.remark" placeholder="请输入备注" />
              </el-form-item>
            </el-col> -->
            <el-col :span="2">
              <el-button
                type="success"
                style="margin-left:5px"
                @click="openHostForm(index)"
                >主机详情表</el-button
              >
            </el-col>
            <el-col :span="1">
              <el-button
                style="margin-left:20px"
                icon="el-icon-delete"
                type="danger"
                circle
                @click="deleteHostFn(elem, index)"
              ></el-button>
            </el-col>
          </el-row>
        </div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="medium"
          @click="addHostFn"
          >添加应用主机</el-button
        >

    addHostFn() {
      console.log("systemHostVos", this.form.systemHostVos);
      console.log("HostForm", this.HostForm);
      this.form.systemHostVos.push({
        systemCase: "", // 系统环境
        systemStatus: "", // 系统使用状态
        visitUrl: "", // 访问URL
        cdomain: "", // 长域名
        cmdbHostIds: [] //主机详情表id
      });
    },
    //删除主机信息
    deleteHostFn(elem, index) {
      this.form.systemHostVos.splice(index, 1);
    },
    // 打开主机
    openHostForm(index) {
      this.hostIndex = index;
      this.$refs.hostRefs.dialogFormVisible = true;
      this.$refs.hostRefs.getHostList();
      this.$refs.hostRefs.hostFormInfoList = [];
    },
    // 主机传来的每项数据id
    hostDetailsFn(data) {
      this.form.systemHostVos[this.hostIndex].cmdbHostIds = data;
    }, // 下拉环境选择逻辑
    systemCaseOptDisabled(dictDataName) {
      let o = this.form.systemHostVos.findIndex(item => {
        return item.systemCase == dictDataName;
      });
      console.log(o, dictDataName);
      return o > -1;
    },

3.实现效果: