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>

完整示例演示