一、确定默认值
在设置下拉框的默认值之前,我们需要先确定默认值是什么。一般来说,下拉框的默认值要么是第一个选项,要么是用户最近一次选择的选项。如果是第一个选项,则不需要进行任何操作,因为 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
方法中,我们则将用户最近一次选择的值保存到本地存储中,以便下一次使用时能够加载该值作为默认值。