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里面的拼接的值