Vue-common-select NPM

还在持续开发中……

npm login
npm publish


#第一种引入方式
#uiSelect  组件引用方式（建立在element-ui select组件基础上）

import PingUI from 'vue-common-select' // 名字随意
Vue.use(PingUI)
#第2种引入方式
import {uiSelect} from 'vue-common-select'

##基本属性支持 disabled  placeholder 等

 fetchSelData(param) {
 // 自己自定义的查询参数 customerName  返回一个promise
      if (param) param = {...param, customerName: param.name}
      return new Promise((resolve, reject) => {
            resolve(res.result)
      })
    },

#第一种基本用法默认展示的name属性值是code

       <ui-select :fetchData="fetchSelData" widthSl="163" v-model="id">
                    </ui-select>

第二种基本用法自定义属性展示自定义列表样式值是id 展示item.name 里这个name自定义

       <ui-select :fetchData="fetchSelData" widthSl="163" :props="{value:'id'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第三种基本用法自定义 url 不需要写 fetchData方法

       <ui-select widthSl="163" :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第四种基本用法默认回写值在编辑表格时需要可参考弹出页面时syncBoolean设置true

syncData=[{value:'',label:''}] 就是下拉框options的值 才能回写成功
       <ui-select widthSl="163"
          :isEdit.sync="syncBoolean"
           :selId.sync="syncData"
       :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第五种基本用法默认回写值和第四种类似但通过id值查询查询时syncBoolean设置true

       <ui-select widthSl="163"
          :isFetch.sync="syncBoolean"
       :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第四种基本用法可以自定义查询参数名称一个(queryStr 是参数)

syncData=[{value:'',label:''}] 就是下拉框options的值 才能回写成功
       <ui-select widthSl="163"
          :isEdit.sync="syncBoolean"
           :selId.sync="syncData"
       :props="{value:'id',label:'label',queryStr:'name',url:'XX/XX'}"  v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>