GG

# gg-picker2 二级联动选择框

gg-picker2

两列联动选择框，一般和表单配合使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggPicker2 from '@/components/gg-picker2/gg-picker2.vue'
export default {
    components: {ggPicker2}
}
1
2
3
4

在 template 中使用组件

# 两列（二级）联动选择

 <gg-picker2 label="两列选择" v-model="formData.picker2"  :dataLists="pickerLists" />
1
  • 从底部弹起的滚动选择器 | 普通选择器 mode = selector 两列
  • 本组件一般用于 双列联动选择

script

export default {
  data() {
    return {
      formData: {
        picker2: ['0', '03'],
      },
      pickerLists: [
        {
          value: 0,
          text: '橘子',
          free: [
            { value: '01', text: '橘子汁' },
            { value: '02', text: '橘子汁1' },
            { value: '03', text: '橘子汁2' }
          ]
        },
        {
          value: 1,
          text: '柠檬',
          free: [
            { value: '01', text: '柠檬汁' },
            { value: '011', text: '柠檬汁1' }
          ]
        },
        {
          value: 2,
          text: '香蕉',
          free: [
            { value: '01', text: '香蕉汁' }
          ]
        },
        {
          value: 3,
          text: '苹果',
          free: [
            {
              value: '01', text: '苹果汁'
            }
          ]
        },
        {
          value: 4,
          text: '榴莲',
          free: [
            { value: '01', text: '留恋汁' }
          ]
        },
      ],
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 属性说明

属性名 类型 默认值 说明
label String - 字段名
placeholder String - 占位符
v-model String - 数据双向绑定
labelWidth Number 60 字段区域宽度，上下排列无效
layout String row 排列方式 ['row','col']
message String - 错误提示
messageDisplay Boolean false 错误提示是否显示
dataType String value 数据类型['value','text']
tip String - 提示
must Boolean false 是否必填
dataLists Array - 选项，有dataUrl参数时无效
dataUrl String - dataLists的网络请求地址
dataValue String value dataLists中value的标识
dataText String text dataLists中text的标识

# 插件预览地址

← 三级联动 →