p-el-select

破产案件一体化管理平台下拉选框组件

特性

1. 使用 v-model 绑定选中标签的值
2. 传入 option 即可渲染组件
3. 可以配置接口远程获取下拉选项，可通过 load 控制远程获取选项的时机
4. 可以通过配置懒加载，分页获取下拉选项，并支持模糊查询
5. 基于 vue2 版本封装，强依赖于 element-ui
6. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx)。

安装和引入

安装

npm install p-el-select -S

引入

import PElSelect from "p-el-select";

Vue.use(PElSelect);

基础使用

<template>
  <div>
    <p-el-select
      v-model="model"
      :options="options"
      placeholder="请选择"
      width="200px"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: "",
      options: [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" },
        { value: "4", label: "选项4" },
      ],
    };
  },
};
</script>

远程获取下拉选项

在 p-el-select 中，设定 dataType 值为 custom，即使用远程获取下拉选项，通过 netWork 配置数据源

<template>
  <div>
    <p-el-select
      v-model="model"
      dataType="custom"
      :netWork="netWork"
      placeholder="请选择"
      width="200px"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: "",
      netWork: {
        // 调用接口
        method: () => {
          return {
            code: 200,
            data: [
              { value: "1", label: "选项1" },
              { value: "2", label: "选项2" },
              { value: "3", label: "选项3" },
              { value: "4", label: "选项4" },
            ],
          };
        },
        // 接口参数
        params: {},
      },
    };
  },
};
</script>

API

p-el-select 属性

参数	类型	默认值	说明
v-model	number/string	-	绑定值
optionAttrs	object	-	下拉选项字段别名
dataType	string	default	数据源，默认使用 options
netWork	object	-	远程接口配置
options	array	[]	下拉选项
width	string	150px	下拉框宽度
lazy	boolean	false	是否使用懒加载
pageSize	number	10	懒加载单页数据条数
load	boolean	true	是否开始远程加载
filterField	string	name	远程模糊匹配查询字段

p-el-select 事件

事件名称	说明	回调参数
updata-option	远程获取下拉选项后的回调	获取到的下拉选项
change	选中项发生变化	value：选中项参数，options：所有数据项

optionAttrs Attributes 属性

需要渲染的 tab 集合

属性	类型	默认值	说明
value	string	-	下拉选项中绑定为 value 的字段
label	string	-	下拉选项中绑定为 label 的字段