This page is translated by Google Cloud Translation API

Switch to Chinese

component name: uni-data-picker

Code block: uDataPicker Associated components: uni-data-pickerview, uni-load-more.

Click to download & install

<uni-data-picker> is a selection class datacom component.

Single-column and multi-column cascade selections are supported. There is no limit to the number of columns. If the screen is not fully displayed, the top tab area will scroll left and right.

The candidate data supports one-time loading, and also supports lazy loading. For example, in the example picture, after selecting "Beijing", the district/county data of Beijing is dynamically loaded.

The <uni-data-picker> component is especially useful for selection classes such as address selection, category selection, etc.

<uni-data-picker> supports local data, cloud static data (json), and uniCloud cloud database data.

<uni-data-picker> 可以通过JQL直连uniCloud云数据库，配套DB Schema，可在schema2code中自动生成前端页面，还支持服务器端校验。

Create new tables "uni-id-address" and "opendb-city-china" in the uniCloud data table. The schemas of these two tables are associated with foreignKey. On the table structure page of the "uni-id-address" table, use schema2code to generate the front-end page. The maintenance page for address management will be automatically generated, and addresses will be automatically selected from the information of all provinces and cities in China contained in the "opendb-city-china" table.

introduce

Notes

In order to avoid wrong use and bring you a bad development experience, please read the following precautions carefully before using the component, which can help you avoid some mistakes.

• The component needs to depend on the sass plugin, please install it manually
• <uni-data-picker> contains the popup layer component <uni-data-pickerview> The outer layout may affect the popup layer, [Details](https://developer.mozilla.org/en -CN/docs/Web/CSS/Common_CSS_Questions)
• Cloud data requires associated service space
• The table opendb-city-china used in the following example (the data of cities, provinces and cities in China, including Hong Kong, Macao and Taiwan), is created using opendb in the uniCloud console , details

Cloud data

<template>
  <view>
    <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
 @change="onchange" @nodeclick="onnodeclick">
    </uni-data-picker>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      onchange(e) {
        const value = e.detail.value
      },
      onnodeclick(node) {}
    }
  }
</script>

local data

<template>
  <view>
    <uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
          text: "一年级",
          value: "1-0",
          children: [
            {
              text: "1.1班",
              value: "1-1"
            },
            {
              text: "1.2班",
              value: "1-2"
            }
          ]
        },
        {
          text: "二年级",
          value: "2-0"
        },
        {
          text: "三年级",
          value: "3-0"
        }]
      }
    },
    methods: {
      onchange(e) {
        const value = e.detail.value
      },
      onnodeclick(node) {
      }
    }
  }
</script>

自定义 Slot

<uni-data-picker v-slot:default="{data, error, options}" popup-title="请选择所在地区">
  <view v-if="error" class="error">
    <text>{{error}}</text>
  </view>
  <view v-else-if="data.length" class="selected">
    <view v-for="(item,index) in data" :key="index" class="selected-item">
      <text>{{item.text}}</text>
    </view>
  </view>
  <view v-else>
    <text>请选择</text>
  </view>
</uni-data-picker>

Notes When localdata and collection are configured at the same time, localdata takes precedence

API

DataPicker Props

property name	type	optional value	default value	description
v-model	String/ Number	-	-	绑定数据
spaceInfo	Object	-	-	服务空间配置，详情
localdata	Array	-	-	data, details
preload	Boolean	true/false	false	Preload data
readonly	Boolean	true/false	false	Disabled
clear-icon	Boolean	true/false	true	whether to show clear button
ellipsYes	Boolean	true/false	true	whether to hide the long text of the tab label
step-searh	Boolean	true/false	true	分步查询时，点击节点请求数据
self-field	String	-	-	Current field name during step-by-step query
parent-field	String	-	-	Parent field name during step-by-step query
collection	String	-	-	Table name. Supports input of multiple table names, separated by ,
field	String	-	-	查询字段，多个字段用 , 分割
where	String	-	-	查询条件，内容较多，另见jql文档：详情
orderby	String	-	-	Order field and reverse order setting
popup-title	String			popup layer title
map	Object	-	{text:'text',value:'value'}	Field mapping, map text/value to other fields in the data

注意

collection/where/orderby 和 <unicloud-db> 的用法一致，详情

DataPicker Events

EventName	Type	Description
@change	EventHandle	Triggered when selection is complete {detail: {value}}
@nodeclick	EventHandle	节点被点击时触发
@popupopened	EventHandle	Triggered when the popup layer pops up
@popupclosed	EventHandle	Fired when the popup layer is closed

DataPicker Methods

method name	description	parameters
show	Open popup layer	-
hide	Close the popup layer	-
clear	Clear selected options	-

Instructions:

this.$refs.picker.show() // `picker` 为组件的 ref 名称

DataPicker Slots

名称	说明
default	Override Display Box Contents

Example

attention

The example relies on multiple components such as uni-card uni-section uni-scss, copying the example code directly will not work properly.

Please go to the Component download page , select Import sample project using HBuilderX on the right side of the page to experience the complete component example.

Template

Script

Style

<template>
	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
		</uni-card>
		<uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);">
			<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
			</uni-data-picker>
		</uni-section>
	</view>
</template>

完整示例演示