Map 的使用

场景

在写一个包含多条数据的循环表单组件时，需要记住已经选过的下拉框值和其索引值，目的是避免下拉框值重复。如果使用数组和对象，在取值和设置时会很繁琐。

这时，想到 Map，可以设置类似字典的 key、value 值。使用 set, get, has方法可以轻松实现需求。

想要实现的效果

代码

              <el-form-item label="属性值" prop="fromValue">
                <el-select
                  v-model="sentence.fromValue"
                  :placeholder="
                    sentence.fieldObj.field ? '请选择属性值' : '请先选择属性'
                  "
                  :disabled="!sentence.fieldObj.field"
                >
                  <!-- 【逻辑限制2】同一属性，选过属性值A后，就不能再选择属性值A -->
                  <el-option
                    v-for="(item, idx) in attrValueOptObj[
                      sentence.fieldObj.field
                    ]"
                    :key="idx"
                    :value="item"
                    :label="item"
                    :disabled="
                      choosedTagAndFromValue.hasOwnProperty(
                        sentence.fieldObj.field
                      ) &&
                      choosedTagAndFromValue[sentence.fieldObj.field].has(
                        item
                      ) &&
                      choosedTagAndFromValue[sentence.fieldObj.field].get(
                        item
                      ) !== index
                    "
                  />
                </el-select>
              </el-form-item>

    // 计算属性中：已经选择过的属性标识及其属性值
    choosedTagAndFromValue() {
      let res = {};
      this.batchSentences.forEach((e, index) => {
        if (e.fromValue) {
          const flag = res.hasOwnProperty(e.fieldObj.field);
          if (!flag) {
            res[e.fieldObj.field] = new Map(); // 初始化 Map
          }
          res[e.fieldObj.field].set(e.fromValue, index);
        }
      });
      return res;
    },

  // data 中
      batchSentences: [
        {
          fieldObj: {
            field: "",
            label: "",
          },
          fromValue: "",
          toValue: "",
        },
      ],

参考链接

Map 语法