fish-select 选择器

介绍

fish-select 是基于Element UI 的 Select 选择器 封装的组件，具有灵活的配置，以及强大的功能，支持自定义模版。

用法

基础用法

适用广泛的基础单选，简化了option的配置、数据绑定和展示字段。

<template>
    <fish-select v-model="value" :data-list="dataList" ></fish-select>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        dataList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }
    }
  }
</script>

异步获取数据

新添加了直接获取异步数据的方法，支持入参配置

<template>
    <fish-select v-model="value" :params='params' :get-list="getList" ></fish-select>
</template>
<script>
  export default {
    data() {
      return {
        value: null,
        dataList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        params:{
          id:1
        }
      }
    },
    methods: {
      getList(params) {
        console.log('getList 参数',params)
        return  new Promise(reslove=>{
          setTimeout(()=>{
             reslove(this.dataList)
          },2000)
        })
      },
    }
  }
</script>

远程搜索

大大简化了远程搜索的配置项

<template>
    <fish-select v-model="value" :get-list="remoteMethod" remote ></fish-select>
</template>
<script>
  export default {
    data() {
      return {
        value: null,
        dataList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        params:{
          id:1
        }
      }
    },
    methods: {
      remoteMethod(params) {
        console.log('remoteMethod 参数',params)
        return  new Promise(reslove=>{
          setTimeout(()=>{
            if(params.keyWord){
             reslove(this.dataList)
            }else{
             reslove([])
            }
          },2000)
        })
      },
    }
  }
</script>

扩展事件

更多扩展事件的使用，比如获取当前选择数据等。

<template>
    <fish-select
        v-model="value"
        @selectList="setSelectList"
        @currentObj="currentObj"  
        :get-list="getList"
        :params='params'
      ></fish-select>
</template>
<script>
  export default {
    data() {
      return {
        value: null,
        dataList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        params:{
          id:1
        }
      }
    },
    methods: {
      getList(params) {
        console.log('getList 参数',params)
        return  new Promise(reslove=>{
          setTimeout(()=>{
             reslove(this.dataList)
          },2000)
        })
      },
      setSelectList(arr) {
           console.log('setSelectList',arr)
      },
      currentObj(obj) {
         console.log('currentObj',obj)
      }
    }
  }
</script>

其他使用

更多使用示例，包含禁用，基础多选，基础多选自定义模版等。

<template>
    <label>禁用</label>
  <fish-select v-model="value" :data-list="dataList"  disabled></fish-select>
  <label>基础多选</label>
  <fish-select v-model="value1" multiple :data-list="dataList" ></fish-select>
    <label>基础多选自定义模板</label>
  <fish-select
        v-model="value1"
        multiple
        :data-list="dataList"
        :custom-render="customRender"
        collapse-tags
  ></fish-select> 
</template>
<script>
  export default {
    data() {
      return {
        value: null,
        value1: [],
        dataList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        params:{
          id:1
        }
      }
    },
    methods: {
      customRender(h, item) {
        return (
          <div>
            <span style="float: left">{item.label}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
              {item.value}
            </span>
          </div>
        );
      },
      getList(params) {
        console.log('getList 参数',params)
        return  new Promise(reslove=>{
          setTimeout(()=>{
             reslove(this.dataList)
          },2000)
        })
      },
      setSelectList(arr) {
           console.log('setSelectList',arr)
      },
      currentObj(obj) {
         console.log('currentObj',obj)
      }
    }
  }
</script>

配置项

封装的配置项及说明，其他配置和事件请参照 el-select

Props

Events