Picker 选择框

表单类型组件，结合form组件使用

单列选择

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="单列选择">
      <wx-picker v-model="v1" :data="data1" label="证件类型" placeholder="请选择证件类型"></wx-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      data1: [
        { label: "身份证", value: 0 },
        { label: "学生证", value: 1 },
        { label: "军官证", value: 2 },
        { label: "护照", value: 3 },
        { label: "其他", value: 4 }
      ],
      v1: null
    };
  }
};
</script>

级联选择

通过 cascade-depth 指定级联层级数。

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="级联选择">
      <wx-picker v-model="v2" :data="data2" label="详细地址" :cascade-depth="3" placeholder="请选择详细地址"></wx-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      data2: [
        {
          label: "广东",
          value: 0,
          children: [
            {
              label: "广州",
              value: 0,
              children: [
                {
                  label: "海珠区",
                  value: 0
                },
                {
                  label: "番禺区",
                  value: 1
                }
              ]
            },
            {
              label: "佛山",
              value: 1,
              children: [
                {
                  label: "禅城区",
                  value: 0
                },
                {
                  label: "南海区",
                  value: 1
                }
              ]
            }
          ]
        },
        {
          label: "广西",
          value: 1,
          children: [
            {
              label: "南宁",
              value: 0,
              children: [
                {
                  label: "青秀区",
                  value: 0
                },
                {
                  label: "兴宁区",
                  value: 1
                }
              ]
            },
            {
              label: "桂林",
              value: 1,
              children: [
                {
                  label: "象山区",
                  value: 0
                },
                {
                  label: "秀峰区",
                  value: 1
                }
              ]
            }
          ]
        }
      ],
      v2: null
    };
  }
};
</script>

选择数据要求

选择数据的层级数必须与 cascade-depth 指定的层级数一致

默认值/显示格式/不可用

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="默认值/显示格式/不可用">
      <wx-picker v-model="v3" :data="data1" label="证件类型"></wx-picker>
      <wx-picker v-model="v4" :data="data2" label="详细地址" :cascade-depth="3"></wx-picker>
      <wx-picker v-model="v4" :data="data2" label="详细地址" disabled :cascade-depth="3" cascade-text-separator="/"></wx-picker>
    </wx-form-group>
  </wx-form-body>
  <wx-form-tips>详细地址，选中值：{{displayV}}</wx-form-tips>
</wx-form>

<script>
export default {
  data() {
    return {
      data1: [...], // 略
      data2: [...], // 略
      v3: 3,
      v4: [0, 1, 0],
      displayV: '[]'
    };
  },
  created() {
    this.displayV = JSON.stringify(this.v4);
  },
  watch: {
    v4(val) {
      this.displayV = JSON.stringify(val);
    }
  }
};
</script>

数据校验

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="单列选择">
      <wx-picker v-model="v1" :data="data1" label="证件类型" placeholder="请选择证件类型" required></wx-picker>
    </wx-form-group>
  </wx-form-body>
  <wx-form-action>
    <wx-button @click="handleClick">确定</wx-button>
  </wx-form-action>
</wx-form>

<script>
export default {
  data() {
    return {
      data1: [...], // 略
      v1: null
    };
  },
  methods: {
    handleClick() {
      this.$refs.form.validate(error => {
        if (error) {
          this.$tooltip(error)
        } else {
          this.$toast("验证成功", { type: "success" })
        }
      });
    }
  }
};
</script>

提示

表单布局和表单校验可参考Form

Picker Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	String/Number	-	-
label	选择框标题	String	-	-
placeholder	选择框占位文本	String	-	-
required	是否必选	Boolean	-	false
emptyTips	空值校验提示信息	String	-	-
disabled	禁用状态	Boolean	-	false
data	可选择数据列表	Array	-	[]
cascadeDepth	可选数据级联层级数	Number	-	1
cascadeTextSeparator	自定义级联文本显示分隔符	String	-	" "

data 格式说明

  [
    { label: "", value: "", children: []}
  ]

data 为树形结构，树的层级数即是级联层级数

Picker Events

事件名称	说明	回调参数
select	选取数据时触发	result: Array，所选数据的值数组

选择框