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

发表评论