English
component name: uni-data-picker
Code block:
uDataPicker
Associated components:uni-data-pickerview
,uni-load-more
.
<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.
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.
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)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<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>
<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>
<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
andcollection
are configured at the same time,localdata
takes precedence
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>
的用法一致,详情
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 |
method name | description | parameters |
---|---|---|
show | Open popup layer | - |
hide | Close the popup layer | - |
clear | Clear selected options | - |
Instructions:
this.$refs.picker.show() // `picker` 为组件的 ref 名称
名称 | 说明 |
---|---|
default | Override Display Box Contents |
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>