mcommon

# MSelect

# 参数配置

以下字段为MSelect的默认配置、扩展事件和选项，其他配置和事件请参照el-select

# Props

字段 说明 类型 默认值
params 请求参数 object {}
valueKey 对应数据绑定和展示字段 Object { label: 'label', value: 'value' }
dataList 下拉数据 array []
getList 异步获取数据的方法,当dataList不为空时不执行该方法 promise -
filterable 是否可搜索 boolean true
clearable 是否可清楚 boolean true
customRender 自定义模版 Function -

# Events

事件名称 说明 回调参数
selectList 当异步请求数据时成功回调 当前下拉数据 array
currentObj 当前选中或清除时回调 当前选中的数据 object、null

# 用法

<template>
  <ul class="demo-select">
    <li class="li">
      <label>基本用法</label>
      <m-select v-model="value" :data-list="dataList" ></m-select>
    </li>
    <li class="li">
      <label>异步获取数据</label>
      <m-select v-model="value"  :get-list="getList"></m-select>
    </li>
    <li class="li">
      <label>远程搜索</label>
      <m-select v-model="value"  :get-list="remoteMethod" remote></m-select>
    </li>
    <li class="li">
      <label>扩展事件</label>
      <m-select
        v-model="value"
        @selectList="setSelectList"
        @currentObj="currentObj"  
        :get-list="getList"
        :params='params'
      ></m-select>
    </li>
    <li class="li">
      <label>自定义模板</label>
      <m-select v-model="value" :data-list="dataList"   :custom-render="customRender"></m-select>
    </li>

    
    <li class="li">
      <label>禁用</label>
      <m-select v-model="value" :data-list="dataList"   :custom-render="customRender" disabled></m-select>
    </li>
    <li class="li">
      <label>基础多选</label>
      <m-select v-model="value1" multiple :data-list="dataList" ></m-select>
    </li>
    <li class="li">
      <label>基础多选自定义模板</label>
      <m-select
        v-model="value1"
        multiple
        :data-list="dataList"
        :custom-render="customRender"
        collapse-tags
      ></m-select> 
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      value: null,
      value1: [],
      dataList: [
        {
          value: "选项1",
          label: "黄金糕",
          disabled: true
        },
        {
          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)
      })
    },
     remoteMethod(params) {
      console.log('remoteMethod 参数',params)
      return  new Promise(reslove=>{
        setTimeout(()=>{
          if(params.keyWord){
           reslove(this.dataList)
          }else{
           reslove([])
          }
        },2000)
      })
    },
    setSelectList(arr) {
       console.log('setSelectList',arr)
    },
    currentObj(obj) {
       console.log('currentObj',obj)
    }
  }
};
</script>
<style lang="scss">
.demo-select {
  .li {
    margin-bottom: 10px;
    display: flex;
  }
  label {
    width: 200px;
    text-align: right;
    padding: 0 8px;
  }
}
</style>
显示代码

← MForm →