在van-picker使用时,如果数组中的对象是label和id,我的columns应该如何绑定取如label的值,并获取对应的id
时间: 2024-09-27 20:06:21 浏览: 42
在van-picker组件中,如果你的数据是以 label 和 id 的形式存储在一个二维数组里,比如:
```javascript
const dataSource = [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
// ...
]
```
你可以通过 `value-key` 和 `text-key` 属性来分别绑定 label 和 id。假设你想获取选中的 label 值,你可以这样做:
```html
<van-picker v-model="selectedValue" :data-source="dataSource" value-key="value" text-key="label">
</van-picker>
```
在这个例子中:
- `v-model="selectedValue"` 将 picker 组件的状态绑定到你应用中的 `selectedValue` 变量,它将保存用户选择的值。
- `:data-source="dataSource"` 指定数据源数组。
- `value-key="value"` 表示当值发生变化时,使用对象的 "value" 属性作为新值。
- `text-key="label"` 表示picker显示的内容会从每个对象的 "label" 属性提取。
当你点击选择框中的某项时,`selectedValue` 就会被赋上对应 id 的字符串值,而 `van-picker` 显示的就是 label 的文本内容。
阅读全文