select | CabinX

示例

基础用法

select支持单选和多选。

PCPhonePad

HTMLJAVASCRIPTCSS

   <page>
     <module title="基础用法">
       <form layout="horizontal"
           confirm-button="{{false}}"
           clear-button="{{false}}"
         >
            <x-item
                 label="单选"
                 name="a"
                 node="select"
                 value="{{1}}"
                 data="{{localData}}"
                 colspan="{{3}}"
               />
            <x-item
                 multiple
                 label="多选"
                 name="b"
                 node="select"
                 value="{[1, 3]}"
                 data="{{localData}}"
                 colspan="{{3}}"
               />
         </form>
       </module>    
   </page>

export default XPage({
    data:{
         localData: [{
                    label: '没币',
                    value: 1
                }, {
                    label: '内容不够优质',
                    value: 2,
                    disabled: true
                }, {
                    label: '吝啬',
                    value: 3
                }, {
                    label: '孽根',
                    value: 4
                }],
    }
});

选中值合并展示

多选时可用，select支持使用collapseTags和collapseTagsLength将选中的值超过一定数量后合并展示，仅多选时可用。

PCPhonePad

HTMLJAVASCRIPTCSS

   <page>
     <module title="基础用法">
       <actions>
           <button text="切换form类型" bind-click="clickHandler"></button>
       </actions>
       <form type="{{type}}"
           confirm-button="{{false}}"
           clear-button="{{false}}"
         >           
            <x-item
                 multiple
                 label="默认"
                 name="a"
                 node="select"
                 collapseTags
                 data="{{localData}}"
                 colspan="{{3}}"
               />
                <x-item
                multiple
                label="超过阈值开始合并"
                name="b"
                node="select"
                collapseTagsLength="{{3}}"             
                collapseTags
                data="{{localData}}"
                colspan="{{3}}"
            />
         </form>
       </module>    
   </page>

export default XPage({
    data:{
         localData: [
             {
                    label: '苹果',
                    value: 1
                }, {
                    label: '葡萄',
                    value: 2,
                    disabled: true
                }, {
                    label: '李子',
                    value: 3
                }, {
                    label: '香蕉',
                    value: 4
                }, {
                    label: '水蜜桃',
                    value: 5
                }, {
                    label: '火龙果',
                    value: 6
                }, {
                    label: '猕猴桃',
                    value: 7
                }, {
                    label: '榴莲',
                    value: 8
                }, {
                    label: '西瓜',
                    value: 9
                }],
         type:'base',       
    },
    clickHandler(){
      this.setData({
         type:this.data.type==='base'?'info':'base'
      });  
    },
});

提示

select支持在data数组中设置tooltip展示单条数据的提示信息。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
  <module title="提示">
      <form>
        <item
            label="单选"
            name="single"
            node="select"
            placeholder="请选择"
            data="{{list}}"
            colspan="{{3}}"
          />
        <item
          label="多选"
          name="multiple"
          node="select"
          placeholder="请选择"
          data="{{list}}"
          colspan="{{3}}"
          multiple
        />
      </form>
  </module>
</page>

export default XPage({
data:{
 list: Array.from({length: 12}).map((d, i) => ({value: i, label: i, tooltip:i})),
}
})

远程获取数据

可配置ajax通过远程接口获取数据，调用逻辑在组件内部完成。调用过程提供了如下钩子函数：

beforeRequest：接口调用前执行，需要修改入参可在这里处理。
beforeRender：接口调用成功后，更新界面前执行，可在这里对接口返回的数据进行修改。
loaded：接口调用结束后执行，无论成功与否都会执行。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
  <module title="远程获取数据">
      <form>
           <x-item
                label="远程获取数据"
                name="h"
                node="select"
                placeholder="直接配置URL即可"
                ajax="{{remotedAjax}}"
                colspan="{{3}}"
                beforeRequest="{{beforeRequest}}"
                beforeRender="{{beforeRender}}"
                loaded="{{loaded}}"
              />
      </form>
  </module>
</page>

   
export default XPage({
  data:{
     remotedAjax: {
       url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/select/options',
     },
  },
    beforeRequest(params){
      const result=Object.assign(params,{
               customInfo:'测试'
           });
        console.info('beforeRequest',result);
        return result;
    },
    beforeRender(result){
          console.info('beforeRender',result);
          return result;
    },
    loaded(result){
          console.info('loaded',result);
    },
})

本地和远程搜索

select支持本地和远程两种搜索方式。

本地搜索：条目默认超过14条才能展示，也可配置useFilterOptionSize修改阈值。通过属性filter可自定义过滤方法。
远程搜索：设置remoteSearchable可开启远程搜索功能，同时需要配置ajax才能调远程接口，有修改入参需求可在beforeRequest 方法中处理，该方法支持返回一个Promise对象。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
  <module title="搜索">
      <form labelSize="250px">
         <x-item
              label="超过 14 条自动显示前端搜索框(默认本地搜索)"
              name="f"
              node="select"
              placeholder="请选择"
              data="{{Array.from({length: 20}).map((d, i) => ({value: `${i}`, label: `label${i}`}))}}"
              colspan="{{3}}"
            />
            <x-item
                label="自定义搜索方法(仅本地搜索可用)"
                name="d"
                node="select"
                placeholder="请选择"
                data="{{Array.from({length: 20}).map((d, i) => ({value: `${i}`, label: `label${i}`}))}}"
                colspan="{{3}}"
                filter="{{customFilter}}"
              />
          <x-item
               label="远程搜索"
               name="c"
               node="select"
               remoteSearchable
               colspan="{{3}}"
               ajax="{{remotedAjax}}"
               description="mock接口的数据为姓名列表"
             />
          <x-item
               label="远程搜索修改入参"
               name="c"
               node="select"
               remoteSearchable
               beforeRequest="{{beforeRequest}}"
               colspan="{{3}}"
               ajax="{{remotedAjax}}"
             />          
      </form>
  </module>
</page>

   
export default XPage({
  data:{
     remotedAjax: {
               url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/select/options',
     },
  },
  customFilter(searchValue,item){
      return item.label && item.label.indexOf(searchValue) > -1;
  },
  beforeRequest(params){
    return new Promise((resolve)=>{
          resolve(Object.assign(params,{
              customInfo:'测试'
          }));
      });
  },
})

创建条目

配置allowCreate后开启，当select本身的数据没有满足的情况，可自行添加条目。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="{{`输入未提供的选项并选择：${value||''}`}}">
        <actions>
            <button text="获取数据" bindclick="getValue"></button>
        </actions>
        <form x='form' confirm-button={{false}} clear-button={{false}}>
            <item name="fruit" label="单选" node="select" data="{{fruit}}" allow-create="{{true}}" placeholder="单选" indchanged="changeFruit"></item>
            <item name="city" label="多选" node="select" data="{{city}}" allow-create="{{true}}" multiple="{{true}}" placeholder="多选" bindchanged="changeCity"></item>
        </form>
    </module>
</page>

   
export default XPage({
    data: {
        fruit: [
            { label: '苹果', value: '1' },
            { label: '鸭梨', value: '2' },
            { label: '西瓜', value: '3' },
        ],
        city: [
            {
                label: '北京',
                value: 'bj',
            },
            {
                label: '成都',
                value: 'cd',
            },
            {
                label: '上海',
                value: 'sh',
            },
            {
                label: '深圳',
                value: 'sz',
            },
        ],
        fruitValue: null,
        cityValue: null,
        value: null,
    },
    changeFruit(value, option) {
        this.setData({
            fruitValue: JSON.stringify(option),
        });

        console.info('fruit', JSON.stringify(option));
    },
    changeCity(value, option) {
        this.setData({
            cityValue: JSON.stringify(option),
        });

        console.info('city', JSON.stringify(option));
    },
    getValue() {
        let value = this.getComponent('form').getData();
        this.setData({
            value: JSON.stringify(value),
        });
    },
});

虚拟滚动

数据较大时，请启用虚拟滚动。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
  <module title="虚拟滚动">
      <form>
           <x-item
                label="数据 >= 1W"
                name="ld"
                node="select"
                placeholder="请选择"
                virtualScroll
                multiple
                data="{{largeData}}"
                colspan="{{3}}"
                description="数据较大时，请启用虚拟滚动"
              />
      </form>
  </module>
</page>

   
export default XPage({
  data:{
    largeData: Array.from({ length: 11000 }).map((item, index) => {
        const num = index + 1;

        return {
            label: `项目-${num}`,
            value: String(num),
        };
    }),
  },
})

Attributes

属性	说明	类型	可选值	默认值	端	版本
name	名称	String	--	--	PC/Mobile	--
value	绑定值	String/Number/Array	--	--	PC/Mobile	--
data	选项	Array<{label, value, disabled, tooltip}>	--	--	PC/Mobile	--
multiple	多选	Boolean	--	false	PC/Mobile	--
disabled	禁用	Boolean	--	false	PC/Mobile	--
clearable	显示清除icon	Boolean	--	true	PC/Mobile	--
filter	自定义搜索方法	Function(searchValue: String, item: { label: String, value: any }): Boolean	--	--	PC/Mobile	--
placeholder	占位符	String	--	--	PC/Mobile	--
cancelByClick	取消	Boolean	--	false	PC	--
virtualScroll	是否开启虚拟滚动	Boolean	--	false	PC/Mobile	--
useFilterOptionSize	当大于设置值时，开启过滤搜索	Number	--	14	PC	--
allowCreate	是否允许创建新的项目，如果输入的值不在可选值中，则创建一个新的tag，但是并不会修改可选值。注意：这并不允许设置value时，设置一个不存在于可选值的值	Boolean	true/false	false	PC/Mobile	--
inputProps	搜索输入框自定义属性	Object	--	--	PC	--
collapseTagsLength	多选情况下超过设置值展示合并标签	Number	--	1	PC	--
collapseTags	是否合并多选效果	Boolean	--	false	PC	--
separators	搜索关键词过滤分隔符连接符	Boolean / Array	false	--	PC	--
tokenSeparators	分词的分隔符	Array/String	在允许创建新项（allow-create=true）和多选(multiple=true)模式下的分词分隔符	--	PC	--
selectBtn	是否开启全选和反选	Boolean	--	false	PC/Mobile	--
beforeChange	改变前钩子函数	Function(newValue: any, oldValue: any): Boolean/Promise	--	--	PC/Mobile	--
ajax	请求相关	String/Object<{url, method(默认get，可选：get、post), params}>/Promise	--	--	PC/Mobile	--
remoteSearchable	远程搜索	Boolean	--	false	PC/Mobile	--
loaded	请求处理完成后的回调	Function	--	--	PC/Mobile	--
beforeRequest	在请求之前对参数进行操作，如果返回 false ，则阻止请求发送(可用于校验和控制请求频率)	false/Object	--	--	PC/Mobile	--
beforeRender	渲染前数据过滤，须返回对应数据	Function	--	--	PC/Mobile	--
notCabinxTag	如果需要用原生标签，可以使用这个参数，编译器将不会对 select 转成 x-select 。注意，这个标签只在命令行编译阶段生效，而不是运行阶段，所以，赋值对他是没有用的	--	--	--	PC/Mobile	--
showCheckedPool	是否展示已选项池，只在selectBtn multiple 下开启	--	--	--	PC	--
suffix	后缀追加图标	String/Object	icon/{icon,style,click} style 只在Mobile 生效	--	PC/Mobile	--
optionAlign	移动端选项对齐方式	String	left right center 只在Mobile的单选模式生效	--	Mobile	--

suffix options

属性	说明	类型	可选值	默认值	端	版本
icon	图标	String	--	--	PC/Mobile	--
click	点击事件	Function	--	--	PC/Mobile	--
style	样式	Object	--	--	Mobile	--

Attributes - data

属性	说明	类型	可选值	默认值	端	版本
label	文案	String	--	--	PC/Mobile	--
value	值	String	--	--	PC/Mobile	--
disabled	禁用	Boolean	--	false	PC/Mobile	--
tooltip	提示	String	--	--	PC	--

Events

名称	说明	回调参数	端	版本
changed	值改变后触发	(value, {})	PC/Mobile	--

Methods

名称	说明	入参	返回	端	版本
load	手动触发初始化数据拉取	--	--	PC/Mobile	--
focus	聚焦	--	--	PC	--

示例​

基础用法​

选中值合并展示​

提示​

远程获取数据​

本地和远程搜索​

创建条目​

虚拟滚动​

Attributes​

suffix options​

Attributes - data​

Events​

Methods​

示例

基础用法

选中值合并展示

提示

远程获取数据

本地和远程搜索

创建条目

虚拟滚动

Attributes

suffix options

Attributes - data

Events

Methods