element下拉框设置默认值为中心

发布时间:2023-05-24

一、确定默认值

在设置下拉框的默认值之前,我们需要先确定默认值是什么。一般来说,下拉框的默认值要么是第一个选项,要么是用户最近一次选择的选项。如果是第一个选项,则不需要进行任何操作,因为 element 下拉框的默认值就是第一个选项。如果是最近一次选择的选项,则需要通过代码来实现。

// 获取本地存储中保存的最近一次选择的选项
var lastValue = localStorage.getItem('lastValue');
// 设置下拉框的默认值为最近一次选择的选项
$('#select').val(lastValue);

在代码中,我们首先通过 localStorage 获取到最近一次选择的选项,然后设置下拉框的默认值为该选项。需要注意的是,我们需要给下拉框设置一个 id 为 "select",才能通过 $('#select') 来获取到下拉框的对象。

二、通过 props 设置默认值

除了上面的方法外,我们还可以通过 props 来设置下拉框的默认值。

<el-select v-model="value" placeholder="请选择">
  <el-option label="选项一" value="1"></el-option>
  <el-option label="选项二" value="2"></el-option>
</el-select>
<script>
export default {
  data() {
    return {
      value: '2' // 设置默认值为"选项二"
    };
  }
};
</script>

在代码中,我们通过 data 属性定义了一个 value 变量,并将其设置为 "选项二",这样在页面渲染时,下拉框的默认值就是 "选项二"。

三、通过 ref 设置默认值

除了 props 外,我们还可以通过 ref 来设置下拉框的默认值。

<el-select ref="select" v-model="value" placeholder="请选择">
  <el-option label="选项一" value="1"></el-option>
  <el-option label="选项二" value="2"></el-option>
</el-select>
<script>
export default {
  data() {
    return {
      value: '2' // 设置默认值为"选项二"
    };
  },
  mounted() {
    // 获取下拉框对象
    var select = this.$refs.select;
    // 设置下拉框的默认值为"选项二"
    select.$el.querySelector('.el-select-dropdown__item.selected').click();
  }
};
</script>

在代码中,我们通过 ref 来获取下拉框对象,然后设置默认值为 "选项二"。需要注意的是,我们需要在下拉框渲染完成后才能获取到下拉框对象,所以需要在 mounted 函数中进行操作。

四、通过 watch 监听变化并设置默认值

除了上述方法外,我们还可以通过 watch 来监听下拉框的变化,并设置默认值。

<el-select v-model="value" placeholder="请选择" @change="handleChange">
  <el-option label="选项一" value="1"></el-option>
  <el-option label="选项二" value="2"></el-option>
</el-select>
<script>
export default {
  data() {
    return {
      value: '' // 不设置默认值
    };
  },
  methods: {
    handleChange(value) {
      // 将当前选中的值保存到本地存储中
      localStorage.setItem('lastValue', value);
    }
  },
  watch: {
    value(val) {
      // 如果 value 的值为空,则说明用户是第一次使用该下拉框,设置默认值为"选项一"
      if (val === '') {
        this.value = '1';
      }
    }
  }
};
</script>

在代码中,我们通过 watch 来监听 value 变量的变化,如果 value 的值为空,则说明用户是第一次使用该下拉框,我们则将值设置为 "选项一"。而在 handleChange 方法中,我们则将用户最近一次选择的值保存到本地存储中,以便下一次使用时能够加载该值作为默认值。