SelectInput 选择输入 v1.2.6

日历输入组件用于在表单中，与输入框同步弹出选择日期或日期区间。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

提示

该组件在小程序中，因为层级问题，可能会被页面的pi-bottom-bar 布局覆盖，使用后请谨慎测试

示例

基础用法

可通过v-model | value：控制选择项

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="region" label="所在地区">
      <pi-select-input
        v-model="form.region"
        :select="{
          items: regions,
          popupSelect: {
            showTitle: true,
            title: '请选择地区'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { region: 'beijing', }
    }
  }
}
</script>

单选提交

可通过:select="{singleCancel: false, singleConfirm: true}"：开启单选提交模式

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="region" label="单选提交">
      <pi-select-input
        v-model="form.singleConfirm"
        :select="{
          items: regions,
          singleCancel: false,
          singleConfirm: true,
          popupSelect: {
            showTitle: true,
            title: '请选择地区'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { singleConfirm: 'shanghai', }
    }
  }
}
</script>

多选

可通过:select="{isMulti: true}"：开启多选

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="region" label="多选">
      <pi-select-input
        v-model="form.isMulti"
        :select="{
          items: regions,
          isMulti: true,
          popupSelect: {
            showTitle: true,
            title: '请选择地区'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { isMulti: ['shanghai', 'zhuhai'], }
    }
  }
}
</script>

单选（默认值对象模式）

可通过v-model | value：绑定对象模式选择项

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="region" label="单选（默认值对象模式）">
      <pi-select-input
        v-model="form.objectRegion"
        :select="{
          keyDefaultValue: false,
          items: regions,
          popupSelect: {
            showTitle: true,
            title: '请选择地区'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { objectRegion: { id: 'zhuhai', text: '珠海' }, }
    }
  }
}
</script>

多选（默认值对象数组模式）

可通过v-model | value：多选模式下，绑定对象数组模式选择项

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="region" label="多选（默认值对象数组模式）">
      <pi-select-input
        v-model="form.objectIsMulti"
        :select="{
          keyDefaultValue: false,
          isMulti: true,
          items: regions,
          popupSelect: {
            showTitle: true,
            title: '请选择地区'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { 
        regions: [
          { id: 'beijing', text: '北京' },
          { id: 'shanghai', text: '上海' },
          { id: 'zhuhai', text: '珠海' }
        ]
      }
    }
  }
}
</script>

API

Props

名称	描述	类型	必选	默认值
value	选择组件默认值	—	false	-
customStyle	自定义样式，对象形式	Object	false	{}
customClass	自定义样式类，字符串形式	String	false	''
rangeSplit	选择项分隔符	String	false	,
parseValueFn	解析值的方法，如果配置了，则读取该函数的返回值作为显示的内容	Function	false	-
input	输入框的配置	Object	false	input配置项
select	select弹窗的配置	Object	false	select配置项

Input Props

提示

以下属性覆盖pi-input配置，其余属性参考input配置项

名称	描述	类型	必选	默认值
placeholder	-	String	false	'请选择'
disabled	-	Boolean	false	true

Select Props

提示

以下属性覆盖pi-select配置，其余属性参考select配置项

名称	描述	类型	必选	默认值
keyDefaultValue	是否只绑定keyField的默认值，默认false	Boolean	false	true

Slots

名称	说明
default	默认插槽

Events

方法名称	说明	参数
change	输入框值发生变化	value(String)