el-select-virtual-scroll-list

Project setup

npm i el-select-virtual-scroll-list

import 引用

import virtualScrollList from "el-select-virtual-scroll-list";


 <VirtualList
      :bindSelectValue="newForm.brandId"
      @parentChange="(value) => (newForm.brandId = value)"
      :disabled="newForm.typeId == 25"
      label="请选择"
      placeholder="请选择"
      selectKey="brandId"
      :keeps="20"
      :selectWidth="100%"
      :showSelectIndex="0"
      :isShowFirstColumnSelect="true"
      :selectList="brandList"
      :propChind="{
        bindKey: 'brandId',
        bindValue: 'brandId',
        bindLabel: 'brandName',
        optionSourcesIndex: false,
      }"
    ></VirtualList>

参数 函数说明

| 参数 | 说明 | 类型 | 默认值 |

| bindSelectValue | 绑定的默认值 | 【number ，string】  | 必填 |
| disabled | 是否禁用 | Boolean |  default false  |
| label | 第一个默认下拉的列表（类似请选择） | string  |  default '' |
| isShowFirstColumnSelect | 是否显示第一个默认下拉的列表（类似请选择） | Boolean |  default true 显示 |
| placeholder | 未选择空值的时候的提示文字 | string |  default ''   |
| selectKey | 列表的唯一字段 | string |   default id  | 必填 |
| keeps | 下拉显示多少条数 | number |  default 20 |
| selectWidth | selectWidth | string | 可传100px 或者100%  default 100%   |
| selectList | 下拉列表的数据 | array | default  [] |
| showSelectIndex | 选中的数据是否展示在第一条 | number | default  0  第一条  范围 0-10|
| propChind | option显示的字段 | object |
     default: bindKey: "index",    描述：字段index作为key值  default： "index",
              bindValue: "id",      描述：字段id作为value值  default： "id", 必填  涉及搜索
              bindLabel: "label",    描述：字段label作为label值   default： "label",
              bindValueCustom: false,  可选字段  描述：是否自定义拼接label值  和bindLabelField是一组  default false,
              bindLabelField:  Function  可选字段  描述：自定义拼接label值的方式  return 自定义拼接方式  source的值
              optionSourcesIndex: false, 描述：是否选用数组index 作为key 默认使用 bindKey的字段  default false
|

| 函数 | 说明

parentChange  选择后返回的值

1.0.9    解决搜索参数错误  propChind.bindLabel 字段
1.0.11   增加lable自定义拼接
1.0.15   可以搜索bindLabelField里面的拼接的值