更新记录

0.1.5（2022-07-02）

完善文档

0.1.4（2022-07-02）

修改说明文档

0.1.3（2022-07-02）

新增：valueField、textField属性，用来处理服务器返回不是value、text格式的数据 新增：width属性，用以显示不同宽度的选择器 优化：下拉列表中选择中的选项显示特殊的样式方便区分

平台兼容性

qisi-data-select 数据选择器

组件名：qisi-data-select 代码块： qDataSelect

• 修复：官方组件异步加载数据不显示的问题
• 新增：change事件增加第二个参数返回选中的对象数据，方便调用
• 新增：valueField、textField属性，用来处理服务器返回不是value、text格式的数据
• 新增：width属性，用以显示不同宽度的选择器
• 优化：下拉列表中选择中的选项显示特殊的样式方便区分 ::: tip 组件名：qisi-data-select

代码块： uDataSelect

点击下载&安装 :::

当选项过多时，使用下拉菜单展示并选择内容

介绍

本组件要解决问题包括：

1. 数据绑定型组件：给本组件绑定一个 data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
2. 自动的表单校验：组件绑定了 data，且符合uni-forms组件的表单校验规范，搭配使用会自动实现表单校验

在 uniCloud 开发中，DB Schema中配置了 enum 枚举等类型后，在 web 控制台的自动生成表单功能中，会自动生成qisi-data-select组件并绑定好 data

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请自行手动安装
• 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
• 如使用过程中有任何问题，或者您对 uni-ui 有一些好的建议，欢迎加入 uni-ui 交流群：871950839
• 组件支持 nvue ，需要在 manifest.json > app-plus 节点下配置 "nvueStyleCompiler" : "uni-app"
• 如组件显示有问题 ，请升级 HBuilderX 为 v3.1.0 以上

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

设置 localdata 属性后，组件会通过数据渲染出对应的内容

<template>
  <view>
    <qisi-data-select
      v-model="value"
      :localdata="range"
      @change="change"
    ></qisi-data-select>
  </view>
</template>

export default {
  data() {
    return {
      value: 0,
      range: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
    };
  },
  methods: {
    change(e,item) {
      console.log("e:", e);
      console.log("item:", item); // 返回被选中的数据的完整对象数据
    },
  },
};

非标数据用法[区别于官方的地方]

<template>
  <view>
    <qisi-data-select
      v-model="value"
      :localdata="range"
      :valueField="id"
      :textField="name"
      @change="change"
    ></qisi-data-select>
  </view>
</template>

export default {
  data() {
    return {
      value: 0,
      range: [
        { id: 0, name: "篮球" },
        { id: 1, name: "足球" },
        { id: 2, name: "游泳" },
      ],
    };
  },
  methods: {
    change(e,item) {
      console.log("e:", e);
      console.log("item:", item); // 返回被选中的数据的完整对象数据
    },
  },
};

云端数据示例

<template>
  <view>
    <!-- 云端数据 -->
    <qisi-data-select
      collection="opendb-app-list"
      field="appid as value, name as text"
      label="应用选择"
      v-model="appid"
      :clear="false"
    />
  </view>
</template>

API

DataSelect Props

DataCom Props

更多 DataCom 支持的属性参考更多

Localdata Options

localdata 属性的格式为数组，数组内每项是对象，需要严格遵循如下格式

DataSelect Events