提高用户操作体验，让el-select自动选中所需选项

在开发网站或应用程序时，提高用户体验是至关重要的。其中一个需要考虑的方面是：如何让用户更快速、更容易地完成任务。对于一个数据输入或选择界面，例如表单，el-select 是常用的选择组件之一。在本文中，我们将分享如何让 el-select 自动选中所需选项，以提高用户的选择体验。

一、清晰明确地展示可选项

在数据容易理解和选项不多的情况下，静态字符串和固定选项是很适合的。例如，固定的国家列表可以方便地在el-select中展示：

    <el-select v-model="country">
      <el-option label="中国" value="china"></el-option>
      <el-option label="美国" value="usa"></el-option>
      <el-option label="英国" value="uk"></el-option>
      <el-option label="澳大利亚" value="australia"></el-option>
    </el-select>

在这个例子中，我们将列表选项设为静态的固定值，这是一个最基本的例子。但实际应用中，可选项可能是动态的，需要通过API动态获取，并且选项较多。对于这种情况，应该及时展示用户可以选取的选项并且方便用户快速找到自己所需的选项。

二、自动滚动选中项到可视区域

当有很多选项时，用户需要用滚动条来找到他们想要的选项。但自动将选项滚动到视野可以让用户省去找寻所需选项的步骤。这可以通过 el-select 属性:popper-append-to-body="false" 和事件@visible-change 结合实现。

    <el-select v-model="value" :popper-append-to-body="false" @visible-change="visibleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    visibleChange(visible) {
        if (visible && this.$refs.select.dropdown.$refs.popper != null) {
          this.$nextTick(() => {
            const popper = this.$refs.select.dropdown.$refs.popper;
            const selected = popper.querySelector('.el-select-dropdown__item.selected');
            if (selected != null) {
              const offsetTop = selected.offsetTop;
              const height = popper.clientHeight;
              const selectedHeight = selected.clientHeight;
              if (offsetTop + selectedHeight > height) {
                popper.scrollTop = offsetTop;
              }
            }
          });
        }
      } 

在上面的例子中，我们使用了 @visible-change 事件监测弹出框的出现和隐藏，并在弹出框出现时，查找到当前被选中的项，再将它滚动到视野里。

三、自动选中列表的第一项或上一次选中的项

在Windows应用程序中，当打开下拉框时，通常会自动选择第一个项。在这个世界日益追求高效的今天，我们希望用户能够更快地完成任务。当用户到达下拉框时，我们可以自动选择第一个项来让用户尽快完成选择任务。例如：

  <el-select v-model="value">
      <el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
  </el-select>

  // ...

  data() {
      return {
        value: null,
        options: [{id: '1', name: '选项1'}, {id: '2', name: '选项2'}, {id: '3', name: '选项3'}]
      };
    },
    watch: {
      options(newVal, oldVal) {
        this.value = newVal[0].id;
      }
    }
  

在这个例子中，我们可以自动找到第一个选项并将其设为默认选项。这可以通过使用 watch 然后在 options 改变时更新 value 的值。 另外一种方法是将前一次选择的值存储在localStorage中，在前一次选择的项前自动勾选。

  <el-select v-model="value">
      <el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
  </el-select>

  // ...

  data() {
      return {
        value: localStorage.getItem('lastSelect') || null,
        options: [{id: '1', name: '选项1'}, {id: '2', name: '选项2'}, {id: '3', name: '选项3'}]
      };
    },
    watch: {
      value(newVal) {
        localStorage.setItem('lastSelect', newVal);
      },
      options(newVal, oldVal) {
        const lastSelect = localStorage.getItem('lastSelect');
        if (lastSelect && newVal.findIndex(item => item.id === lastSelect) !== -1) {
          this.value = lastSelect;
        } else {
          this.value = newVal[0].id;
        }
      }
    }
  

在这个例子中，我们可以在 watch 中记录当前选择的值，然后在 options 改变时，自动找到前一次选择的项并将其自动选中。

四、动态输入以搜索选项

当选择的选项很多时，我们可以提供搜索选项功能让用户更容易找到自己所需的选项。在el-select 组件中设置 filterable 属性为 true 即可启用搜索功能。例如：

  <el-select v-model="value" filterable>
      <el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
  </el-select>

  // ...

  data() {
      return {
        value: null,
        options: [{id: '1', name: '选项1'}, {id: '2', name: '选项2'}, {id: '3', name: '选项3'}]
      };
    },
  

在这个例子中，我们设置了 filterable 属性，用户可以在下拉列表中输入文字以搜索选项。

五、结合上述方法的实现

在上文的几个部分中，我们讲解了如何展示可选项、自动滚动选中项到视野范围内、自动选中第一个选项并在选项改变时自动更新、以及搜索选项的实现方法。让我们结合上述方法的实现来制作一个优秀的 el-select 组件。

  <el-select v-model="value" :popper-append-to-body="false" filterable @visible-change="visibleChange">
      <el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
  </el-select>

  // ...

  data() {
      return {
        value: null,
        options: [{id: '1', name: '选项1'}, {id: '2', name: '选项2'}, {id: '3', name: '选项3'}]
      };
    },
    watch: {
      options(newVal, oldVal) {
        if (newVal.length > 0) {
          if (!this.value) {
            this.value = newVal[0].id;
          } else {
            const option = newVal.find(item => item.id === this.value);
            if (!option) {
              this.value = newVal[0].id;
            }
          }
        }
      }
    },
    methods: {
      visibleChange(visible) {
        if (visible && this.$refs.select.dropdown.$refs.popper != null) {
          this.$nextTick(() => {
            const popper = this.$refs.select.dropdown.$refs.popper;
            const selected = popper.querySelector('.el-select-dropdown__item.selected');
            if (selected != null) {
              const offsetTop = selected.offsetTop;
              const height = popper.clientHeight;
              const selectedHeight = selected.clientHeight;
              if (offsetTop + selectedHeight > height) {
                popper.scrollTop = offsetTop;
              }
            }
          });
        }
      }
    }
  

在这个例子中，我们首先设置了 filterable。“@visible-change=visibleChange”是用于滚动到选中项不可见区域的方法。另外在 watch 属性中更新 value 当 options 改变时自动更新，并自动选择第一个项或前一次选择的项。

六、总结

本文中介绍了如何提高用户操作体验，让 el-select 自动选中所需选项，从而提高用户的选择体验。重要的是，清晰明确地展示可选项、将自动选中的选项自动滚动到可视区域、自动选择第一个选项或前一次选择的项以及动态输入以搜索选项是一些有用的方法。结合上述方法的实现，我们可以创建一个可提高用户选择体验的高性能 el-select 组件。