如何讓Element Select默認選中第一個 – 實用代碼實現

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>

三、兼容性

在一些特殊情況下，比如在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>