uView UI 2.0版本中的 Picker,怎么动态赋值?
场景:表编辑功能中,需要给 Picker 设置默认选中项。
注:两列联动
uView UI中的Picker组件可以通过@change
事件来响应选择项的变化,因此我们可以通过在Picker组件上添加v-model
指令来进行动态赋值。
以下是一个简单的示例,它演示了如何在两列Picker组件中动态设置默认选项:
<template>
<view>
<u-picker
title="选择品牌/车系"
:columns="columns"
@change="onChange"
v-model="selectedValues"
/>
</view>
</template>
<script>
export default {
data() {
return {
columns: [
{
values: ['品牌A', '品牌B', '品牌C']
},
{
values: {
'品牌A': ['车系A1', '车系A2', '车系A3'],
'品牌B': ['车系B1', '车系B2', '车系B3'],
'品牌C': ['车系C1', '车系C2', '车系C3']
}
}
],
selectedValues: ['品牌B', '车系B2']
}
},
methods: {
onChange(picker, values) {
this.selectedValues = values;
}
}
};
</script>
在上面的代码中,我们将columns
属性绑定到Picker组件,该属性包含两个值。第一个是品牌列表,第二个是每个品牌的车系列表。我们还定义了一个selectedValues
数组,以指定picker的默认选项。
使用v-model
指令绑定选定的值,使用@change
事件监听选项更改。当用户更改Picker组件的选项时,onChange
方法将被调用,该方法将已选中的值保存在selectedValues
属性中,以便在下次访问时将其用作默认值。
希望这个示例可以帮助您在uView UI中使用Picker组件进行动态赋值。