uView UI 2.0版本中的 Picker,怎么设置默认选中项?

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组件进行动态赋值。