cv-picker2 二级联动选择框 ¶

简要 ¶

从底部弹起的滚动选择器 | 普通选择器 mode = selector 两列
本组件一般用于双列联动选择
两列（二级）联动选择
两列联动选择框，一般和表单配合使用，默认为实心白色背景。

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-picker2</view>
      <view class="components-title-d">两级联动下拉选项</view>
    </view>
    <cv-form-base ref="refFormBase" style="padding: 0 10px">
      <!-- 无默认选项时，会默认选中第一条 -->
      <cv-form-item label="两级联动选择">
        <cv-picker2 v-model="formData.picker" :dataLists="pickerLists" />
      </cv-form-item>
      <!-- 有默认选项 -->
      <cv-form-item label="两级联动选择">
        <cv-picker2 v-model="formData.picker2" :dataLists="pickerLists" />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        picker: [0, '02'],
        picker2: ['0', '03']
      },
      pickerLists: [
        {
          value: 0,
          valuea: 'a',
          text: '橘子',
          tree: [
            { value: '01', text: '橘子汁' },
            { value: '02', text: '橘子汁1' },
            { value: '03', text: '橘子汁2' }
          ]
        },
        {
          value: 1,
          valuea: 'b',
          text: '柠檬',
          tree: [
            { value: '01', text: '柠檬汁' },
            { value: '011', text: '柠檬汁1' }
          ]
        },
        {
          value: 2,
          valuea: 'c',
          text: '香蕉',
          tree: [{ value: '01', text: '香蕉汁' }]
        },
        {
          value: 3,
          valuea: 'd',
          text: '苹果',
          tree: [
            {
              value: '01',
              text: '苹果汁'
            }
          ]
        },
        {
          value: 4,
          valuea: 'e',
          text: '榴莲',
          tree: [{ value: '01', text: '留恋汁' }]
        }
      ]
    };
  },
  onLoad() {},
  methods: {}
};
</script>

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
placeholder	String	-	占位符
dataType	String	value	数据类型['value','text']
dataLists	Array	-	展示数据
dataValue	String	value	dataLists中value的标识
dataText	String	text	dataLists中text的标识
dataTree	String	'tree'	树形结构数据，字段