级联及下拉选择完成

components/en-from/en-head/en-head-img.vue

@@ -4,7 +4,7 @@
 			<image class="left" :src="headImg" mode="aspectFill"></image>
 			<view class="right">
 				<text>{{label}}</text>
-        <image src="@/static/img/toRight.png" mode=""></image>
+        <text class="iconfont">&#xe62b;</text>
 			</view>
 		</view>
     <uni-popup ref="popup" type="bottom">
@@ -91,6 +91,7 @@
 </script>
 
 <style scoped lang="scss">
+@import url("../../static/css/en-common.css");
 .popup-block {
   border-radius: 20rpx 20rpx 0rpx 0rpx;
   overflow: hidden;
@@ -136,10 +137,7 @@
 				font-size: 32rpx;
 				color: #333;
 			}
-			image{
-				width: 40rpx;
-				height: 40rpx;
-			}
+
 		}
 	}
 	.pop-box{

components/en-from/en-select/en-select.vue

@@ -0,0 +1,194 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
+        {{ label }}
+      </view>
+      <view class="input-box-right" @click="showPickerObj">
+        <text :class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
+        <text class="iconfont">&#xe62b;</text>
+      </view>
+    </view>
+    <uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
+                     @change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
+    </uni-data-picker>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-select',
+  props: {
+    localData: {
+      type: Array,
+      default: [{
+        text: "一年级",
+        value: "1-0",
+        children: [{
+          text: "1.1班",
+          value: "1-1"
+        },
+          {
+            text: "1.2班",
+            value: "1-2"
+          }]
+      },
+        {
+          text: "二年级",
+          value: "2-0",
+          children: [{
+            text: "2.1班",
+            value: "2-1"
+          },
+            {
+              text: "2.2班",
+              value: "2-2"
+            }]
+        }]
+    },
+    label: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'text'
+    },
+    valueType: {
+      type: String,
+      default: '1'
+    },
+    value: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputValue: [],
+      optionName: '',
+      labelWidth: 0,
+      showPicker:false
+    }
+  },
+  components: {},
+  mounted() {
+    this.setValue()
+    this.setLabelWidth()
+  },
+  watch: {
+    'value': function () {
+      this.setValue()
+    },
+    'inputValue': function () {
+      if(this.valueType==='1'){
+        this.$emit('input', this.inputValue.join(','))
+      }else {
+        this.$emit('input', this.inputValue)
+      }
+    }
+  },
+  methods: {
+    setValue(){
+      let value=this.value
+      if(typeof value==='string'){
+        value=value.split(',')
+      }
+      if(this.inputValue!==value){
+        this.inputValue=value
+        this.optionName = "";
+        this.localData.forEach((one)=>{
+          if(one.value===this.inputValue[0]){
+            this.optionName += one.text + " ";
+            if(one.children){
+              one.children.forEach((two)=>{
+                if(two.value===this.inputValue[1]){
+                  this.optionName += two.text + " ";
+                  if(two.children){
+                    two.children.forEach((three)=>{
+                      if(three.value===this.inputValue[2]){
+                        this.optionName += three.text + " ";
+                      }
+                    })
+                  }
+                }
+              })
+            }
+          }
+        })
+      }
+
+    },
+    setPopupClosed() {
+      this.showPicker = false;
+    },
+    showPickerObj() {
+      console.log(this.$refs.pickerObj)
+      this.$refs.pickerObj.show();
+      this.showPicker = true;
+    },
+    pickerChange(data) {
+      this.optionName = "";
+      this.inputValue = [];
+      data.detail.value.forEach((item) => {
+        this.optionName += item.text + " ";
+        this.inputValue.push(item.value)
+      });
+      this.showPicker = false;
+    },
+    setLabelWidth() {
+      let differenceNum = 4 - this.label.length;
+      if (differenceNum === 2) {
+        this.labelWidth = '2em'
+      } else if (differenceNum === 1) {
+        this.labelWidth = '0.5em'
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../static/css/en-common.css");
+
+.box {
+  .input-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .input-box-left {
+      width: 210rpx;
+      font-size: 32rpx;
+      color: #333333;
+    }
+
+    .input-box-right {
+      width: 100%;
+
+      text {
+        font-size: 32rpx;
+        color: #333;
+      }
+
+      .iconfont {
+        float: right;
+      }
+
+      .no-option {
+        color: #999999;
+      }
+
+    }
+  }
+}
+
+</style>

pages/index/index.vue

@@ -3,13 +3,14 @@
 		<Nav title="首页"></Nav>
 <!--		<view class="border-item"></view>-->
 		<enInput v-model="text" label="姓名姓名"></enInput>
-		<enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
-		<enCheckbox v-model="type" label="爱好爱好" :checkboxData="checkboxData"></enCheckbox>
-		<enRadio v-model="sex" label="性别性别" :radioData="radioData"></enRadio>
-		<enSwitch v-model="status" label="状态试"></enSwitch>
-		<enTextarea v-model="content" label="个人简介"></enTextarea>
-		<enDate v-model="birthday" type="datetime" label="生日生日"></enDate>
+<!--		<enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>-->
+<!--		<enCheckbox v-model="type" label="爱好爱好" :checkboxData="checkboxData"></enCheckbox>-->
+<!--		<enRadio v-model="sex" label="性别性别" :radioData="radioData"></enRadio>-->
+<!--		<enSwitch v-model="status" label="状态试"></enSwitch>-->
+<!--		<enTextarea v-model="content" label="个人简介"></enTextarea>-->
+<!--		<enDate v-model="birthday" type="datetime" label="生日生日"></enDate>-->
 		<enHeadImg v-model="img" label="修改头像"></enHeadImg>
+		<enSelect v-model="classIds" label="班级"></enSelect>
 		<enUpload v-model="imgs" ></enUpload>
 
 
@@ -27,9 +28,11 @@
 	import enDate from "components/en-from/en-date/en-date"
 	import enHeadImg from "components/en-from/en-head/en-head-img"
 	import enUpload from "components/en-from/en-upload/en-upload"
+	import enSelect from "components/en-from/en-select/en-select"
 
 	export default {
 		components: {
+      enSelect,
       enUpload,
 			enDate,
 		 enTextarea,
@@ -45,8 +48,9 @@
 				img:require('@/static/img/2.jpg'),
         imgs:[require('@/static/img/2.jpg')],
 				phone: '13900139001',
+        classIds: '2-0,2-2',
 				birthday: '',
-				text: '来自火星的你',
+				text: '',
 				content: '你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?',
 				type: ['1'],
 				sex: '1',
@@ -72,6 +76,9 @@
 			}
 		},
 		watch: {
+      'classIds': function() {
+        console.log('new--------classIds', this.classIds)
+      },
       'imgs': function() {
         console.log('new--------imgs', this.imgs)
       },

uni_modules/uni-data-picker/changelog.md

@@ -0,0 +1,64 @@
+## 1.0.7（2022-07-06）
+- 优化 pc端图标位置不正确的问题
+## 1.0.6（2022-07-05）
+- 优化 显示样式
+## 1.0.5（2022-07-04）
+- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+## 1.0.4（2022-04-19）
+- 修复 字节小程序 本地数据无法选择下一级的Bug
+## 1.0.3（2022-02-25）
+- 修复 nvue 不支持的 v-show 的 bug
+## 1.0.2（2022-02-25）
+- 修复 条件编译 nvue 不支持的 css 样式
+## 1.0.1（2021-11-23）
+- 修复 由上个版本引发的map、v-model等属性不生效的bug
+## 1.0.0（2021-11-19）
+- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+## 0.4.9（2021-10-28）
+- 修复 VUE2 v-model 概率无效的 bug
+## 0.4.8（2021-10-27）
+- 修复 v-model 概率无效的 bug
+## 0.4.7（2021-10-25）
+- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
+- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
+## 0.4.6（2021-10-19）
+- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
+## 0.4.5（2021-09-26）
+- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
+- 修复 readonly 为 true 时报错的 bug
+## 0.4.4（2021-09-26）
+- 修复 上一版本造成的 map 属性失效的 bug
+- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
+## 0.4.3（2021-09-24）
+- 修复 某些情况下级联未触发的 bug
+## 0.4.2（2021-09-23）
+- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
+- 新增 选项内容过长自动添加省略号
+## 0.4.1（2021-09-15）
+- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
+## 0.4.0（2021-07-13）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.3.5（2021-06-04）
+- 修复 无法加载云端数据的问题
+## 0.3.4（2021-05-28）
+- 修复 v-model 无效问题
+- 修复 loaddata 为空数据组时加载时间过长问题
+- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
+## 0.3.3（2021-05-12）
+- 新增 组件示例地址
+## 0.3.2（2021-04-22）
+- 修复 非树形数据有 where 属性查询报错的问题
+## 0.3.1（2021-04-15）
+- 修复 本地数据概率无法回显时问题
+## 0.3.0（2021-04-07）
+- 新增 支持云端非树形表结构数据
+- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
+## 0.2.0（2021-03-15）
+- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
+## 0.1.9（2021-03-09）
+- 修复 微信小程序某些情况下无法选择的问题
+## 0.1.8（2021-02-05）
+- 优化 部分样式在 nvue 上的兼容表现
+## 0.1.7（2021-02-05）
+- 调整为 uni_modules 目录规范

uni_modules/uni-data-picker/components/uni-data-picker/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue

@@ -0,0 +1,554 @@
+<template>
+	<view class="uni-data-tree">
+		<view class="uni-data-tree-input" @click="handleInput">
+			<slot :options="options" :data="inputSelected" :error="errorMessage">
+				<view class="input-value" :class="{'input-value-border': border}">
+					<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
+					<view v-else-if="loading && !isOpened" class="selected-area">
+						<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+					</view>
+					<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
+						<view class="selected-list">
+							<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
+								<text class="text-color">{{item.text}}</text><text v-if="index<inputSelected.length-1"
+									class="input-split-line">{{split}}</text>
+							</view>
+						</view>
+					</scroll-view>
+					<text v-else class="selected-area placeholder">{{placeholder}}</text>
+					<view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear"
+						@click.stop="clear">
+						<uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>
+					</view>
+					<view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
+						<view class="input-arrow"></view>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
+		<view class="uni-data-tree-dialog" v-if="isOpened">
+			<view class="uni-popper__arrow"></view>
+			<view class="dialog-caption">
+				<view class="title-area">
+					<text class="dialog-title">{{popupTitle}}</text>
+				</view>
+				<view class="dialog-close" @click="handleClose">
+					<view class="dialog-close-plus" data-id="close"></view>
+					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+				</view>
+			</view>
+			<data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
+				:preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
+				:step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true"
+				:map="map" :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
+			</data-picker-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
+	import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
+
+	/**
+	 * DataPicker 级联选择
+	 * @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+	 * @property {String} popup-title 弹出窗口标题
+	 * @property {Array} localdata 本地数据，参考
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} readonly = [true|false] 是否仅读
+	 * @property {Boolean} preload = [true|false] 是否预加载数据
+	 * @value true 开启预加载数据，点击弹出窗口后显示已加载数据
+	 * @value false 关闭预加载数据，点击弹出窗口后开始加载数据
+	 * @property {Boolean} step-searh = [true|false] 是否分布查询
+	 * @value true 启用分布查询，仅查询当前选中节点
+	 * @value false 关闭分布查询，一次查询出所有数据
+	 * @property {String|DBFieldString} self-field 分布查询当前字段名称
+	 * @property {String|DBFieldString} parent-field 分布查询父字段名称
+	 * @property {String|DBCollectionString} collection 表名
+	 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+	 * @property {String} orderby 排序字段及正序倒叙设置
+	 * @property {String|JQLString} where 查询条件
+	 * @event {Function} popupshow 弹出的选择窗口打开时触发此事件
+	 * @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
+	 */
+	export default {
+		name: 'UniDataPicker',
+		emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue'],
+		mixins: [dataPicker],
+		components: {
+			DataPickerView
+		},
+		props: {
+			options: {
+				type: [Object, Array],
+				default () {
+					return {}
+				}
+			},
+			popupTitle: {
+				type: String,
+				default: '请选择'
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			heightMobile: {
+				type: String,
+				default: ''
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			},
+			clearIcon: {
+				type: Boolean,
+				default: true
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			split: {
+				type: String,
+				default: '/'
+			},
+			ellipsis: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				isOpened: false,
+				inputSelected: []
+			}
+		},
+		created() {
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+			if (this.formItem) {
+				if (this.formItem.name) {
+					this.rename = this.formItem.name
+					this.form.inputChildrens.push(this)
+				}
+			}
+
+			this.$nextTick(() => {
+				this.load()
+			})
+		},
+		methods: {
+			clear() {
+				this.inputSelected.splice(0)
+				this._dispatchEvent([])
+			},
+			onPropsChange() {
+				this._treeData = []
+				this.selectedIndex = 0
+				this.load()
+			},
+			load() {
+				if (this.readonly) {
+					this._processReadonly(this.localdata, this.dataValue)
+					return
+				}
+
+				if (this.isLocaldata) {
+					this.loadData()
+					this.inputSelected = this.selected.slice(0)
+				} else if (!this.parentField && !this.selfField && this.hasValue) {
+					this.getNodeData(() => {
+						this.inputSelected = this.selected.slice(0)
+					})
+				} else if (this.hasValue) {
+					this.getTreePath(() => {
+						this.inputSelected = this.selected.slice(0)
+					})
+				}
+			},
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			show() {
+				this.isOpened = true
+				setTimeout(() => {
+					this.$refs.pickerView.updateData({
+						treeData: this._treeData,
+						selected: this.selected,
+						selectedIndex: this.selectedIndex
+					})
+				}, 200)
+				this.$emit('popupopened')
+			},
+			hide() {
+				this.isOpened = false
+				this.$emit('popupclosed')
+			},
+			handleInput() {
+				if (this.readonly) {
+					return
+				}
+				this.show()
+			},
+			handleClose(e) {
+				this.hide()
+			},
+			onnodeclick(e) {
+				this.$emit('nodeclick', e)
+			},
+			ondatachange(e) {
+				this._treeData = this.$refs.pickerView._treeData
+			},
+			onchange(e) {
+				this.hide()
+				this.$nextTick(() => {
+					this.inputSelected = e;
+				})
+				this._dispatchEvent(e)
+			},
+			_processReadonly(dataList, value) {
+				var isTree = dataList.findIndex((item) => {
+					return item.children
+				})
+				if (isTree > -1) {
+					let inputValue
+					if (Array.isArray(value)) {
+						inputValue = value[value.length - 1]
+						if (typeof inputValue === 'object' && inputValue.value) {
+							inputValue = inputValue.value
+						}
+					} else {
+						inputValue = value
+					}
+					this.inputSelected = this._findNodePath(inputValue, this.localdata)
+					return
+				}
+
+				if (!this.hasValue) {
+					this.inputSelected = []
+					return
+				}
+
+				let result = []
+				for (let i = 0; i < value.length; i++) {
+					var val = value[i]
+					var item = dataList.find((v) => {
+						return v.value == val
+					})
+					if (item) {
+						result.push(item)
+					}
+				}
+				if (result.length) {
+					this.inputSelected = result
+				}
+			},
+			_filterForArray(data, valueArray) {
+				var result = []
+				for (let i = 0; i < valueArray.length; i++) {
+					var value = valueArray[i]
+					var found = data.find((item) => {
+						return item.value == value
+					})
+					if (found) {
+						result.push(found)
+					}
+				}
+				return result
+			},
+			_dispatchEvent(selected) {
+				let item = {}
+				if (selected.length) {
+					var value = new Array(selected.length)
+					for (var i = 0; i < selected.length; i++) {
+						value[i] = selected[i].value
+					}
+					item = selected[selected.length - 1]
+				} else {
+					item.value = ''
+				}
+				if (this.formItem) {
+					this.formItem.setValue(item.value)
+				}
+
+				this.$emit('input', item.value)
+				this.$emit('update:modelValue', item.value)
+				this.$emit('change', {
+					detail: {
+						value: selected
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style >
+	.uni-data-tree {
+		flex: 1;
+		position: relative;
+		font-size: 14px;
+	}
+
+	.error-text {
+		color: #DD524D;
+	}
+
+	.input-value {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: nowrap;
+		font-size: 14px;
+		/* line-height: 35px; */
+		padding: 0 10px;
+		padding-right: 5px;
+		overflow: hidden;
+		height: 35px;
+		/* #ifdef APP-NVUE */
+		/* #endif */
+		box-sizing: border-box;
+	}
+
+	.input-value-border {
+		border: 1px solid #e5e5e5;
+		border-radius: 5px;
+	}
+
+	.selected-area {
+		flex: 1;
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.load-more {
+		/* #ifndef APP-NVUE */
+		margin-right: auto;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 40px;
+		/* #endif */
+	}
+
+	.selected-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		/* padding: 0 5px; */
+	}
+
+	.selected-item {
+		flex-direction: row;
+		/* padding: 0 1px; */
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+	}
+	
+	.text-color {
+		color: #333;
+	}
+
+	.placeholder {
+		color: grey;
+		font-size: 12px;
+	}
+
+	.input-split-line {
+		opacity: .5;
+	}
+
+	.arrow-area {
+		position: relative;
+		width: 20px;
+		/* #ifndef APP-NVUE */
+		margin-bottom: 5px;
+		margin-left: auto;
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		transform: rotate(-45deg);
+		transform-origin: center;
+	}
+
+	.input-arrow {
+		width: 7px;
+		height: 7px;
+		border-left: 1px solid #999;
+		border-bottom: 1px solid #999;
+	}
+
+	.uni-data-tree-cover {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, .4);
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		z-index: 100;
+	}
+
+	.uni-data-tree-dialog {
+		position: fixed;
+		left: 0;
+		top: 20%;
+		right: 0;
+		bottom: 0;
+		background-color: #FFFFFF;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		z-index: 102;
+		overflow: hidden;
+		/* #ifdef APP-NVUE */
+		width: 750rpx;
+		/* #endif */
+	}
+
+	.dialog-caption {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		/* border-bottom: 1px solid #f0f0f0; */
+	}
+
+	.title-area {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		/* #ifndef APP-NVUE */
+		margin: auto;
+		/* #endif */
+		padding: 0 10px;
+	}
+
+	.dialog-title {
+		/* font-weight: bold; */
+		line-height: 44px;
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 0 15px;
+	}
+
+	.dialog-close-plus {
+		width: 16px;
+		height: 2px;
+		background-color: #666;
+		border-radius: 2px;
+		transform: rotate(45deg);
+	}
+
+	.dialog-close-rotate {
+		position: absolute;
+		transform: rotate(-45deg);
+	}
+
+	.picker-view {
+		flex: 1;
+		overflow: hidden;
+	}
+	
+	.icon-clear {
+		display: flex;
+		align-items: center;
+	}
+
+	/* #ifdef H5 */
+	@media all and (min-width: 768px) {
+		.uni-data-tree-cover {
+			background-color: transparent;
+		}
+
+		.uni-data-tree-dialog {
+			position: absolute;
+			top: 55px;
+			height: auto;
+			min-height: 400px;
+			max-height: 50vh;
+			background-color: #fff;
+			border: 1px solid #EBEEF5;
+			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+			border-radius: 4px;
+			overflow: unset;
+		}
+
+		.dialog-caption {
+			display: none;
+		}
+
+		.icon-clear {
+			/* margin-right: 5px; */
+		}
+	}
+
+	/* #endif */
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	/* #ifndef APP-NVUE */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+	/* #endif */
+	</style>

uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js

@@ -0,0 +1,563 @@
+export default {
+  props: {
+    localdata: {
+      type: [Array, Object],
+      default () {
+        return []
+      }
+    },
+    spaceInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    collection: {
+      type: String,
+      default: ''
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    orderby: {
+      type: String,
+      default: ''
+    },
+    where: {
+      type: [String, Object],
+      default: ''
+    },
+    pageData: {
+      type: String,
+      default: 'add'
+    },
+    pageCurrent: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    getcount: {
+      type: [Boolean, String],
+      default: false
+    },
+    getone: {
+      type: [Boolean, String],
+      default: false
+    },
+    gettree: {
+      type: [Boolean, String],
+      default: false
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    modelValue: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    preload: {
+      type: Boolean,
+      default: false
+    },
+    stepSearh: {
+      type: Boolean,
+      default: true
+    },
+    selfField: {
+      type: String,
+      default: ''
+    },
+    parentField: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    map: {
+      type: Object,
+      default() {
+        return {
+          text: "text",
+          value: "value"
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      errorMessage: '',
+      loadMore: {
+        contentdown: '',
+        contentrefresh: '',
+        contentnomore: ''
+      },
+      dataList: [],
+      selected: [],
+      selectedIndex: 0,
+      page: {
+        current: this.pageCurrent,
+        size: this.pageSize,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    isLocaldata() {
+      return !this.collection.length
+    },
+    postField() {
+      let fields = [this.field];
+      if (this.parentField) {
+        fields.push(`${this.parentField} as parent_value`);
+      }
+      return fields.join(',');
+    },
+    dataValue() {
+      let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null || this.modelValue !== undefined)
+      return isModelValue ? this.modelValue : this.value
+    },
+    hasValue() {
+      if (typeof this.dataValue === 'number') {
+        return true
+      }
+      return (this.dataValue != null) && (this.dataValue.length > 0)
+    }
+  },
+  created() {
+    this.$watch(() => {
+      var al = [];
+      ['pageCurrent',
+        'pageSize',
+        'spaceInfo',
+        'value',
+        'modelValue',
+        'localdata',
+        'collection',
+        'action',
+        'field',
+        'orderby',
+        'where',
+        'getont',
+        'getcount',
+        'gettree'
+      ].forEach(key => {
+        al.push(this[key])
+      });
+      return al
+    }, (newValue, oldValue) => {
+      let needReset = false
+      for (let i = 2; i < newValue.length; i++) {
+        if (newValue[i] != oldValue[i]) {
+          needReset = true
+          break
+        }
+      }
+      if (newValue[0] != oldValue[0]) {
+        this.page.current = this.pageCurrent
+      }
+      this.page.size = this.pageSize
+
+      this.onPropsChange()
+    })
+    this._treeData = []
+  },
+  methods: {
+    onPropsChange() {
+      this._treeData = []
+    },
+    getCommand(options = {}) {
+      /* eslint-disable no-undef */
+      let db = uniCloud.database(this.spaceInfo)
+
+      const action = options.action || this.action
+      if (action) {
+        db = db.action(action)
+      }
+
+      const collection = options.collection || this.collection
+      db = db.collection(collection)
+
+      const where = options.where || this.where
+      if (!(!where || !Object.keys(where).length)) {
+        db = db.where(where)
+      }
+
+      const field = options.field || this.field
+      if (field) {
+        db = db.field(field)
+      }
+
+      const orderby = options.orderby || this.orderby
+      if (orderby) {
+        db = db.orderBy(orderby)
+      }
+
+      const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
+      const size = options.pageSize !== undefined ? options.pageSize : this.page.size
+      const getCount = options.getcount !== undefined ? options.getcount : this.getcount
+      const getTree = options.gettree !== undefined ? options.gettree : this.gettree
+
+      const getOptions = {
+        getCount,
+        getTree
+      }
+      if (options.getTreePath) {
+        getOptions.getTreePath = options.getTreePath
+      }
+
+      db = db.skip(size * (current - 1)).limit(size).get(getOptions)
+
+      return db
+    },
+		getNodeData(callback) {
+		  if (this.loading) {
+		    return
+		  }
+		  this.loading = true
+		  this.getCommand({
+		    field: this.postField,
+				where: this._pathWhere()
+		  }).then((res) => {
+		    this.loading = false
+		    this.selected = res.result.data
+		    callback && callback()
+		  }).catch((err) => {
+		    this.loading = false
+		    this.errorMessage = err
+		  })
+		},
+    getTreePath(callback) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        getTreePath: {
+          startWith: `${this.selfField}=='${this.dataValue}'`
+        }
+      }).then((res) => {
+        this.loading = false
+        let treePath = []
+        this._extractTreePath(res.result.data, treePath)
+        this.selected = treePath
+        callback && callback()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    loadData() {
+      if (this.isLocaldata) {
+        this._processLocalData()
+        return
+      }
+
+      if (this.dataValue != null) {
+        this._loadNodeData((data) => {
+          this._treeData = data
+          this._updateBindData()
+          this._updateSelected()
+        })
+        return
+      }
+
+      if (this.stepSearh) {
+        this._loadNodeData((data) => {
+          this._treeData = data
+          this._updateBindData()
+        })
+      } else {
+        this._loadAllData((data) => {
+          this._treeData = []
+          this._extractTree(data, this._treeData, null)
+          this._updateBindData()
+        })
+      }
+    },
+    _loadAllData(callback) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        gettree: true,
+        startwith: `${this.selfField}=='${this.dataValue}'`
+      }).then((res) => {
+        this.loading = false
+        callback(res.result.data)
+        this.onDataChange()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    _loadNodeData(callback, pw) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.getCommand({
+        field: this.postField,
+        where: pw || this._postWhere(),
+        pageSize: 500
+      }).then((res) => {
+        this.loading = false
+        callback(res.result.data)
+        this.onDataChange()
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+      })
+    },
+    _pathWhere() {
+      let result = []
+      let where_field = this._getParentNameByField();
+      if (where_field) {
+        result.push(`${where_field} == '${this.dataValue}'`)
+      }
+
+      if (this.where) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+    _postWhere() {
+      let result = []
+      let selected = this.selected
+      let parentField = this.parentField
+      if (parentField) {
+        result.push(`${parentField} == null || ${parentField} == ""`)
+      }
+      if (selected.length) {
+        for (var i = 0; i < selected.length - 1; i++) {
+          result.push(`${parentField} == '${selected[i].value}'`)
+        }
+      }
+
+      let where = []
+      if (this.where) {
+        where.push(`(${this.where})`)
+      }
+      if (result.length) {
+        where.push(`(${result.join(' || ')})`)
+      }
+
+      return where.join(' && ')
+    },
+    _nodeWhere() {
+      let result = []
+      let selected = this.selected
+      if (selected.length) {
+        result.push(`${this.parentField} == '${selected[selected.length - 1].value}'`)
+      }
+
+      if (this.where) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+    _getParentNameByField() {
+      const fields = this.field.split(',');
+      let where_field = null;
+      for (let i = 0; i < fields.length; i++) {
+        const items = fields[i].split('as');
+        if (items.length < 2) {
+          continue;
+        }
+        if (items[1].trim() === 'value') {
+          where_field = items[0].trim();
+          break;
+        }
+      }
+      return where_field
+    },
+    _isTreeView() {
+      return (this.parentField && this.selfField)
+    },
+    _updateSelected() {
+      var dl = this.dataList
+      var sl = this.selected
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (var i = 0; i < sl.length; i++) {
+        var value = sl[i].value
+        var dl2 = dl[i]
+        for (var j = 0; j < dl2.length; j++) {
+          var item2 = dl2[j]
+          if (item2[valueField] === value) {
+            sl[i].text = item2[textField]
+            break
+          }
+        }
+      }
+    },
+    _updateBindData(node) {
+      const {
+        dataList,
+        hasNodes
+      } = this._filterData(this._treeData, this.selected)
+
+      let isleaf = this._stepSearh === false && !hasNodes
+
+      if (node) {
+        node.isleaf = isleaf
+      }
+
+      this.dataList = dataList
+      this.selectedIndex = dataList.length - 1
+
+      if (!isleaf && this.selected.length < dataList.length) {
+        this.selected.push({
+          value: null,
+          text: "请选择"
+        })
+      }
+
+      return {
+        isleaf,
+        hasNodes
+      }
+    },
+    _filterData(data, paths) {
+      let dataList = []
+      let hasNodes = true
+
+      dataList.push(data.filter((item) => {
+        return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
+      }))
+      for (let i = 0; i < paths.length; i++) {
+        var value = paths[i].value
+        var nodes = data.filter((item) => {
+          return item.parent_value === value
+        })
+
+        if (nodes.length) {
+          dataList.push(nodes)
+        } else {
+          hasNodes = false
+        }
+      }
+
+      return {
+        dataList,
+        hasNodes
+      }
+    },
+    _extractTree(nodes, result, parent_value) {
+      let list = result || []
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
+          child.parent_value = parent_value
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTree(children, result, node[valueField])
+        }
+      }
+    },
+    _extractTreePath(nodes, result) {
+      let list = result || []
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTreePath(children, result)
+        }
+      }
+    },
+    _findNodePath(key, nodes, path = []) {
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+        let children = node.children
+        let text = node[textField]
+        let value = node[valueField]
+
+        path.push({
+          value,
+          text
+        })
+
+        if (value === key) {
+          return path
+        }
+
+        if (children) {
+          const p = this._findNodePath(key, children, path)
+          if (p.length) {
+            return p
+          }
+        }
+
+        path.pop()
+      }
+      return []
+    },
+    _processLocalData() {
+      this._treeData = []
+      this._extractTree(this.localdata, this._treeData)
+
+      var inputValue = this.dataValue
+      if (inputValue === undefined) {
+        return
+      }
+
+      if (Array.isArray(inputValue)) {
+        inputValue = inputValue[inputValue.length - 1]
+        if (typeof inputValue === 'object' && inputValue[this.map.value]) {
+          inputValue = inputValue[this.map.value]
+        }
+      }
+
+      this.selected = this._findNodePath(inputValue, this.localdata)
+    }
+  }
+}

uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue

@@ -0,0 +1,333 @@
+<template>
+	<view class="uni-data-pickerview">
+		<scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
+			<view class="selected-list">
+				<template v-for="(item,index) in selected">
+					<view class="selected-item"
+						:class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
+						 v-if="item.text" @click="handleSelect(index)">
+						<text class="">{{item.text}}</text>
+					</view>
+				</template>
+			</view>
+		</scroll-view>
+		<view class="tab-c">
+			<template v-for="(child, i) in dataList" >
+				<scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true">
+					<view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child"
+						@click="handleNodeClick(item, i, j)">
+						<text class="item-text item-text-overflow">{{item[map.text]}}</text>
+						<view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
+					</view>
+				</scroll-view>
+			</template>
+
+			<view class="loading-cover" v-if="loading">
+				<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+			</view>
+			<view class="error-message" v-if="errorMessage">
+				<text class="error-text">{{errorMessage}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import dataPicker from "./uni-data-picker.js"
+
+	/**
+	 * DataPickerview
+	 * @description uni-data-pickerview
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+	 * @property {Array} localdata 本地数据，参考
+	 * @property {Boolean} step-searh = [true|false] 是否分布查询
+	 * @value true 启用分布查询，仅查询当前选中节点
+	 * @value false 关闭分布查询，一次查询出所有数据
+	 * @property {String|DBFieldString} self-field 分布查询当前字段名称
+	 * @property {String|DBFieldString} parent-field 分布查询父字段名称
+	 * @property {String|DBCollectionString} collection 表名
+	 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+	 * @property {String} orderby 排序字段及正序倒叙设置
+	 * @property {String|JQLString} where 查询条件
+	 */
+	export default {
+		name: 'UniDataPickerView',
+		emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
+		mixins: [dataPicker],
+		props: {
+			managedMode: {
+				type: Boolean,
+				default: false
+			},
+			ellipsis: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {}
+		},
+		created() {
+			if (this.managedMode) {
+				return
+			}
+
+			this.$nextTick(() => {
+				this.load()
+			})
+		},
+		methods: {
+			onPropsChange() {
+				this._treeData = []
+				this.selectedIndex = 0
+				this.load()
+			},
+			load() {
+				if (this.isLocaldata) {
+					this.loadData()
+				} else if (this.dataValue.length) {
+					this.getTreePath((res) => {
+						this.loadData()
+					})
+				}
+			},
+			handleSelect(index) {
+				this.selectedIndex = index
+			},
+			handleNodeClick(item, i, j) {
+				if (item.disable) {
+					return
+				}
+				const node = this.dataList[i][j]
+				const text = node[this.map.text]
+				const value = node[this.map.value]
+				if (i < this.selected.length - 1) {
+					this.selected.splice(i, this.selected.length - i)
+					this.selected.push({
+						text,
+						value
+					})
+				} else if (i === this.selected.length - 1) {
+					this.selected.splice(i, 1, {
+						text,
+						value
+					})
+				}
+
+				if (node.isleaf) {
+					this.onSelectedChange(node, node.isleaf)
+					return
+				}
+
+				const {
+					isleaf,
+					hasNodes
+				} = this._updateBindData()
+
+				if (!this._isTreeView() && !hasNodes) {
+					this.onSelectedChange(node, true)
+					return
+				}
+
+				if (this.isLocaldata && (!hasNodes || isleaf)) {
+					this.onSelectedChange(node, true)
+					return
+				}
+
+				if (!isleaf && !hasNodes) {
+					this._loadNodeData((data) => {
+						if (!data.length) {
+							node.isleaf = true
+						} else {
+							this._treeData.push(...data)
+							this._updateBindData(node)
+						}
+						this.onSelectedChange(node, node.isleaf)
+					}, this._nodeWhere())
+					return
+				}
+
+				this.onSelectedChange(node, false)
+			},
+			updateData(data) {
+				this._treeData = data.treeData
+				this.selected = data.selected
+				if (!this._treeData.length) {
+					this.loadData()
+				} else {
+					//this.selected = data.selected
+					this._updateBindData()
+				}
+			},
+			onDataChange() {
+				this.$emit('datachange')
+			},
+			onSelectedChange(node, isleaf) {
+				if (isleaf) {
+					this._dispatchEvent()
+				}
+
+				if (node) {
+					this.$emit('nodeclick', node)
+				}
+			},
+			_dispatchEvent() {
+				this.$emit('change', this.selected.slice(0))
+			}
+		}
+	}
+</script>
+<style >
+	.uni-data-pickerview {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		overflow: hidden;
+		height: 100%;
+	}
+
+	.error-text {
+		color: #DD524D;
+	}
+
+	.loading-cover {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, .5);
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		z-index: 1001;
+	}
+
+	.load-more {
+		/* #ifndef APP-NVUE */
+		margin: auto;
+		/* #endif */
+	}
+
+	.error-message {
+		background-color: #fff;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		padding: 15px;
+		opacity: .9;
+		z-index: 102;
+	}
+
+	/* #ifdef APP-NVUE */
+	.selected-area {
+		width: 750rpx;
+	}
+
+	/* #endif */
+
+	.selected-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		padding: 0 5px;
+		border-bottom: 1px solid #f8f8f8;
+	}
+
+	.selected-item {
+		margin-left: 10px;
+		margin-right: 10px;
+		padding: 12px 0;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+	}
+
+	.selected-item-text-overflow {
+		width: 168px;
+		/* fix nvue */
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		width: 6em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	.selected-item-active {
+		border-bottom: 2px solid #007aff;
+	}
+
+	.selected-item-text {
+		color: #007aff;
+	}
+
+	.tab-c {
+		position: relative;
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		overflow: hidden;
+	}
+
+	.list {
+		flex: 1;
+	}
+
+	.item {
+		padding: 12px 15px;
+		/* border-bottom: 1px solid #f0f0f0; */
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.is-disabled {
+		opacity: .5;
+	}
+
+	.item-text {
+		/* flex: 1; */
+		color: #333333;
+	}
+
+	.item-text-overflow {
+		width: 280px;
+		/* fix nvue */
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		width: 20em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	.check {
+		margin-right: 5px;
+		border: 2px solid #007aff;
+		border-left: 0;
+		border-top: 0;
+		height: 12px;
+		width: 6px;
+		transform-origin: center;
+		/* #ifndef APP-NVUE */
+		transition: all 0.3s;
+		/* #endif */
+		transform: rotate(45deg);
+	}
+</style>

uni_modules/uni-data-picker/package.json

@@ -0,0 +1,93 @@
+{
+  "id": "uni-data-picker",
+  "displayName": "uni-data-picker 数据驱动的picker选择器",
+  "version": "1.0.7",
+  "description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "picker",
+    "级联",
+    "省市区",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-load-more",
+			"uni-icons",
+			"uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+        "QQ": "y",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-data-picker/readme.md

@@ -0,0 +1,22 @@
+## DataPicker 级联选择
+> **组件名：uni-data-picker**
+> 代码块： `uDataPicker`
+> 关联组件：`uni-data-pickerview`、`uni-load-more`。
+
+
+`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
+
+支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+
+候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
+
+`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
+
+`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
+
+`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
+
+在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839