SuitBigDataSelect大数据下拉框

说明

1、大数据选择下拉框基于 element-ui (opens new window) 的el-select，el-option组件进行的二次封装。
2、主要对于el-option数据量过大，进行了滚动加载处理，每次只加载15条数据，每当滚动到底部再加载剩余数据。
3、组件使用vue组件通讯方法，通过v-bind绑定$attrs,v-on绑定$listeners处理，el-select的属性都可以在当前的组件上面使用。

使用

点一下

<template>
  <div class="app-container userDiv">
    <suit-big-data-select
      v-model="data"
      size="mini"
      clearable
      :options="originalDictList"
      placeholder="请选择参数"
      ref="bigData"
    />
    <suit-button @click="click" type="primary">点一下</suit-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
        data: '',
        originalDictList: [
          {
           label: '测试1',
           code: 'code1' 
          },{
           label: '测试2',
           code: 'code2' 
          },{
           label: '测试3',
           code: 'code3' 
          },{
           label: '测试4',
           code: 'code4' 
          },{
           label: '测试5',
           code: 'code5' 
          },
          {
           label: '测试6',
           code: 'code6' 
          },{
           label: '测试7',
           code: 'code7' 
          },{
           label: '测试8',
           code: 'code8' 
          },{
           label: '测试9',
           code: 'code9' 
          },{
           label: '测试10',
           code: 'code10' 
          },{
           label: '测试11',
           code: 'code11' 
          },{
           label: '测试12',
           code: 'code12' 
          },
          {
           label: '测试13',
           code: 'code13' 
          },
          {
           label: '测试14',
           code: 'code14' 
          },{
           label: '测试15',
           code: 'code15' 
          },{
           label: '测试16',
           code: 'code16' 
          },{
           label: '测试17',
           code: 'code17' 
          },{
           label: '测试18',
           code: 'code18' 
          }
        ]
    }
  },
  methods: {
    click() {
      this.$refs.bigData.clear()
    }
  }
}
</script>

Expand Copy Copy

参数说明

属性

属性	描述	类型	可选值	默认值
options	下拉框下拉选项数据	Array[]	—	[]
v-model	下拉框组件双向绑定的值	string	—	—

options 属性

属性	描述	类型	可选值	默认值
label	下拉项名称	string	—	—
code	下拉项的值	string/number	—	—

事件

名称	描述	回调参数
clear	初始化下拉框数据，展示传入options的前十五条	``