如何让Element Select默认选中第一个 - 实用代码实现

发布时间：2023-05-17

Element Select 是ElementUI中常用的一个下拉选择器组件，但在某些情况下，需要在页面刚加载时就默认选中第一个选项。本文从如何实现此功能、优化代码、兼容性等多个方面做出详细的阐述。

一、获取元素并修改value属性

要实现默认选中第一个，我们需要获取到Select组件中的第一个option并将其value值赋给Select组件的value属性。

<template>
  <el-select v-model="selected">
    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' }
        ],
        selected: ''  // 这里定义一个空字符串用于存储选中的value值
      }
    },
    mounted() {
      // 在mounted钩子中获取第一个option，并将其value值赋给selected
      this.selected = this.options[0].value;
    }
  };
</script>

二、优化代码

上面的代码已经可以实现默认选中第一个了，但随着选项数量的增加，代码会变得冗长。下面介绍几个优化方式。

1. 使用ref获取Select组件

使用Vue的ref指令可以获取到组件的dom元素，从而可以更方便地操作。这样我们就可以不需要在data中定义selected，而是直接通过ref获取到选中的值。

<template>
  <el-select ref="select">
    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' }
        ]
      }
    },
    mounted() {
      // 在mounted钩子中获取第一个option，并设置Select的value属性
      this.$refs.select.$el.querySelector('.el-select-dropdown__item').click();
    }
  };
</script>

2. 使用v-model双向绑定

通过v-model双向绑定，我们可以更方便地控制Select组件的value属性，代码也更加简洁。

<template>
  <el-select v-model="selected">
    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' }
        ],
        selected: '1'  // 设置默认选中第一个
      }
    }
  };
</script>

三、兼容性

在一些特殊情况下，比如<select>在el-table的column中使用时，直接设置value属性可能会出现问题。这时我们可以使用setSelectedValue方法来设置选中值。

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名">
      <template slot-scope="scope">
        <el-select v-model="selected[scope.$index]" @change="handleChange(scope.$index)" ref="select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' }
        ],
        tableData: [
          { name: '张三', selectedValue: '1' },
          { name: '李四', selectedValue: '2' }
        ],
        selected: [] // 需要定义一个数组存储每个Select组件的选中值
      }
    },
    methods: {
      handleChange(index) {
        this.setSelectedValue(index, this.selected[index]);
      },
      setSelectedValue(index, value) {
        // 在设置选中值时，需要先更新属性中绑定的数组，再手动触发change事件
        this.$set(this.tableData[index], 'selectedValue', value);
        this.$nextTick(() => {
          this.$refs.select[index].$emit('change', value);
        });
      }
    },
    mounted() {
      // 在mounted钩子中获取第一个option，并设置Select的value属性
      this.$nextTick(() => {
        this.setSelectedValue(0, '1');
      });
    }
  };
</script>
推荐文章