Web开发Vue2.0数据去重&Element-UI单选框

Posted 2022-02-22 zstar-_

问题场景

写vue2.0的时候遇到了这么一个场景：我需要再用户提交的表单中设置一个下拉式选框，方便用户选取。
具体选项则需要动态从后端数据库中获取。通过后端接口，我可以获得数据表中某一列的数据，但是这些利用循环来进行选项填充，就会出现重复选项，因此需要对重复数据进行去重。

数据去重

我的字段名是sex，可用这个函数进行去重。

    unique(arr)  // 根据唯一标识sex来对数组进行过滤
      const res = new Map();  //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.sex) && res.set(arr.sex, 1))
    

之后，只需要在其它动作函数中重复使用该函数即可。

Element-UI单选框填充

UI方面，使用了Element-UI做单选框。

        <el-form-item label="性别">
          <el-select clearable v-model="form.sex" placeholder="请选择性别" style="width: 100%" >
            <el-option v-for="item in sexs" :key="item.sex" :label="item.sex" :value="item.sex"></el-option>
          </el-select>
        </el-form-item>

但是这段代码有个问题，使用时发现用户还没选择，就进行填充。
查阅Element的官方文档
发现clearable代表是否可以清空选项，默认为false，表示可以清空。
而我的数据表中设置了该字段记录不为null，因此导致了这个bug，去除clearable即恢复正常。