iview的slect选中获取value和label值

本文介绍如何在Vue项目中使用Select组件,通过v-model实现数据双向绑定,并展示了一个具体的示例,包括HTML结构、JS数据配置及事件监听方法。

1、html

<Select v-model="taskcode" @on-change="perChange" style="width:300px" :label-in-value="true">
		        <Option v-for="item in perList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		    </Select>

2、js

taskcode: '',
perList:[
{
value:'111',
label:'aaa'
},{
value:'222',
label:'bbb'
}]

3、方法

methods: {
perChange(e){
console.log(e.value);
console.log(e.label);
}
}

 

iview框架中,实现Select组件全选功能可以参考以下两种方式: ### 方式一 ```vue <Select v-model="specialModel" multiple @on-change='specialChange'> <Option v-for="item in List" :value="item.id" :key="item.id"> {{ item.specialName }} </Option> </Select> ``` 此方式定义了一个多选的Select组件,通过`v-model`绑定选中到`specialModel`,每个选项的`value`为`item.id`,显示内容为`item.specialName`。不过这里未直接实现全选逻辑,需额外编写代码来实现全选功能,例如在某个按钮的点击事件中,将`List`中所有`item.id`添加到`specialModel`中 [^1]。 ### 方式二 ```vue <FormItem :label="设备" :prop="'device'" :rules="ruleValidate.device"> <Select clearable class="form_input" multiple :max-tag-count="1" v-model="item.deviceLists" @on-change='changeSelect' :placeholder="请输入设备"> <Option value="all" key="all" disabled> <Checkbox class="iview-checkbox" v-model="item.checked" @on-change="selectAll">全选</Checkbox> </Option> <Option v-for="item in oemMobileLists" :value="item.value" :key="item.name">{{item.oemName}}</Option> </Select> </FormItem> ``` ```javascript methods: { selectAll() { this.device = []; if (this.checked) { this.oemMobileLists.map((item) => { this.device.push(item.value); }); } }, changeSelect() { let device = this.device; if (device.length === this.oemMobileLists.length) { this.checked = true; } else { this.checked = false; } } } ``` 这种方式在Select组件中添加了一个禁用的选项,其中包含一个复选框用于全选操作。当复选框状态改变时,调用`selectAll`方法。若复选框被选中,则将`oemMobileLists`中所有`item.value`添加到`device`数组中;若取消选中,则清空`device`数组。同时,在`changeSelect`方法中,根据选中的选项数量判断是否全选,若选中数量等于`oemMobileLists`的长度,则将复选框状态设为选中,否则设为未选中 [^2]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值