Element Select下拉选择
文章描述：
Element Select下拉框设置下拉值、设置默认选中值、以及选中值
v-model绑定
<template>
<div>
<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>
<div>
<el-button type="primary" @click="click">button</el-button>
</div>
</div>
</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;
},
methods:{
click(){
console.log(this.selected)
}
}
}
</script>ref获取value和label值
在数据量大的情况下使用ref
<template>
<div>
<el-select ref="systemType" v-model="selectValue" filterable clearable placeholder="请选择系统类别">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
<div>
<el-button type="primary" @click="click">button</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selectValue: '' // 这里定义一个空字符串用于存储选中的value值
}
},
mounted() {
},
methods:{
click(){
console.log(this.$refs.systemType.selected)
let distributeSelectName = this.$refs.systemType.selected.currentLabel
let distributeSelectValue = this.$refs.systemType.selected.value
console.log(distributeSelectName)
console.log(distributeSelectValue)
}
}
}
</script>
发布时间：2023/06/27
发表评论