更新记录

1.0.0（2024-12-07） 下载此版本

有问题请联系作者

平台兼容性

使用示例

<template>
  <view style="padding: 30rpx;box-sizing: border-box;">
    <view v-for="i in value">{{i}}</view>
    <view style="height: 100px;"></view>
    <!-- 本地数据 过滤 搜索 单选 创建新选项-->
    <sh-select :localdata="data" v-model="value" :filterMethod="filterMethod" search  allowCreate/>

    <view style="height: 100px;"></view>
    <!-- 远程数据 分页 搜索 多选 创建新选项 缓存数据-->
    <sh-select :pageMethod="pageMethod" v-model="value" valueKey="id" labelKey="name" search allowCreate multiple :cache="true"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      remoteData: [
        {"name":"Alabama","id":0},{"name":"Alaska","id":1},{"name":"Arizona","id":2},{"name":"Arkansas","id":3},{"name":"California","id":4},{"name":"Colorado","id":5},{"name":"Connecticut","id":6},{"name":"Delaware","id":7},{"name":"Florida","id":8},{"name":"Georgia","id":9},{"name":"Hawaii","id":10},{"name":"Idaho","id":11},{"name":"Illinois","id":12},{"name":"Indiana","id":13},{"name":"Iowa","id":14},{"name":"Kansas","id":15},{"name":"Kentucky","id":16},{"name":"Louisiana","id":17},{"name":"Maine","id":18},{"name":"Maryland","id":19},{"name":"Massachusetts","id":20},{"name":"Michigan","id":21},{"name":"Minnesota","id":22},{"name":"Mississippi","id":23},{"name":"Missouri","id":24},{"name":"Montana","id":25},{"name":"Nebraska","id":26},{"name":"Nevada","id":27},{"name":"New Hampshire","id":28},{"name":"New Jersey","id":29}
      ],
      data: [
        'Alabama',
        'Alaska',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'Florida',
        'Georgia',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New Hampshire',
        'New Jersey',
      ],
    }
  },
  methods: {
    // 模拟分页接口请求
    pageMethod(page, value) {
      console.log(`当前页-> ${page}   搜索关键字-> ${value}`);
      if (value) {
        return this.remoteData.filter(item => item.name.includes(value))
      }
      return this.remoteData.slice((page-1) * 7, page * 7)
    },
    filterMethod(item, value) {
      return item.toLowerCase().includes(value.toLowerCase())
    }
  }
}
</script>

组件预览地址

属性 Props

事件 Emits

插槽 Slots

方法 Exposes