使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象

当我们使用 Elemet UI 的选择组件进行多选时,Select 组件的绑定值是一个数组,但是数组的值只能传入 Number 类型或者 String 类型的数据,如果我们想向其中传入一个对象就会出错,如:

<template>
	<el-select v-model="permissionList" multiple placeholder="请选择">
		<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
	</el-select>
</template>

<script>
export default{
	data() {
		return {
			permissionList: [],
			groups: [{
				id: 1,
				name: 'A组',
				permission: 'Write'
			},{
				id: 2,
				name: 'B组',
				permission: 'Write'
			},{
				id: 3,
				name: 'C组',
				permission: 'Write'
			}]
		}
	}
}
</script>

但是这样组件在选择的时候就会出错:

在这里插入图片描述

同时,控制台报错:

vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>

我们可以发现其为缺少一个索引,翻查 elemnet-ui 的文档,可以查阅到 Select 组件有一个属性:

在这里插入图片描述
那么,我们可以为其添加一个索引的属性,这个 value-key 即为我们绑定对象的唯一标识符,如在上述的例子中,这个标识符为 groupID

所以可以将上面的代码改动为:

<template>
	<el-select 
		v-model="permissionList" 
		multiple 
		placeholder="请选择"
+		value-key="groupID"
	>
		<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
	</el-select>
</template>
  • 15
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
好的,下面是一个简单的封装示例: 1. 在 `components` 目录下新建一个 `select` 目录,然后在 `select` 目录下新建两个文件 `select.wxml` 和 `select.js`。 2. 在 `select.wxml` 文件中编写下拉选择器的模板代码,示例如下: ``` <view class="el-select" bindtap="onSelectTap"> <view class="el-select__input"> <input type="text" class="el-select__inner" placeholder="{{placeholder}}" disabled="{{disabled}}" value="{{selectedText}}"> <i class="el-select__caret el-icon-arrow-down"></i> </view> <view class="el-select-dropdown" hidden="{{!showDropdown}}" catchtouchmove="catchTouchMove"> <scroll-view scroll-y="{{true}}" class="el-select-dropdown__list"> <view class="el-select-dropdown__item" wx:for="{{options}}" wx:key="{{item.value}}" bindtap="onOptionTap" data-value="{{item.value}}"> {{item.label}} </view> </scroll-view> </view> </view> ``` 其中,`placeholder` 表示选择器的占位符,`disabled` 表示选择器是否禁用,`selectedText` 表示当前选中的文本,`showDropdown` 表示下拉框是否显示,`options` 表示下拉框的选项列表。 3. 在 `select.js` 文件中编写组件的逻辑代码,示例如下: ``` Component({ properties: { options: { type: Array, value: [] }, placeholder: { type: String, value: '' }, disabled: { type: Boolean, value: false }, value: { type: [String, Number], value: '', observer: 'onValueChange' } }, data: { selectedValue: '', selectedText: '', showDropdown: false }, methods: { onValueChange: function(newVal) { var options = this.data.options; var selectedItem = options.find(function(item) { return item.value == newVal; }); if (selectedItem) { this.setData({ selectedValue: selectedItem.value, selectedText: selectedItem.label }); } }, onSelectTap: function() { if (this.data.disabled) { return; } this.setData({ showDropdown: !this.data.showDropdown }); }, onOptionTap: function(event) { var value = event.currentTarget.dataset.value; this.setData({ selectedValue: value, selectedText: this.data.options.find(function(item) { return item.value == value; }).label, showDropdown: false }); this.triggerEvent('change', { value: value }); }, catchTouchMove: function() { // 阻止滚动穿透 } } }); ``` 其中,`options` 表示下拉框的选项列表,`placeholder` 表示选择器的占位符,`disabled` 表示选择器是否禁用,`value` 表示当前选中的,`selectedValue` 表示当前选中的,`selectedText` 表示当前选中的文本,`showDropdown` 表示下拉框是否显示。 4. 在需要使用下拉选择器的页面中,引入 `select` 组件并传入相关参数,示例如下: ``` <import src="../../components/select/select.wxml" /> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" /> ``` 其中,`options` 表示下拉框的选项列表,`placeholder` 表示选择器的占位符,`value` 表示当前选中的。 5. 在需要监听选择器改变的页面中,使用 `bind:change` 绑定事件即可,示例如下: ``` <import src="../../components/select/select.wxml" /> <view class="page"> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" bind:change="onSelectChange" /> </view> ``` 其中,`onSelectChange` 表示选择器改变时触发的事件处理函数。 这只是一个简单的示例,如果需要更多功能可以根据实际需求进行扩展。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值