茂名一站式网站建设报价,自己网站可以加标志吗,海纳企业网站管理系统,wordpress主题翻译插件背景#xff1a;在某些使用情况下#xff0c;单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担#xff0c;从而造成性能问题。 ——vue3element-plus有现成的轮子。而vue2element-ui没有。 以下 文章大部分 摘自 源组件中的README.md… 背景在某些使用情况下单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担从而造成性能问题。 ——vue3element-plus有现成的轮子。而vue2element-ui没有。 以下 文章大部分 摘自 源组件中的README.md Select V2 虚拟列表选择器
基于 Element UI适用于 Vue 2 版本的虚拟列表选择器组件。
在线演示
在线演示
使用说明
安装
npm i el-select-v2 -S全局引入 //全局引入import ElSelectV2 from el-select-v2;Vue.use(ElSelectV2);局部引入
templateel-select-v2 v-modelvalue :optionsoptions /
/templatescript//局部引入import ElSelectV2 from el-select-v2export default {components: {ElSelectV2 },data() {return {options: [],value: ,};},created() {for (let i 0; i 10000; i) {this.options.push({value: value ${i 1},label: label ${i 1},});}},};
/script插槽的使用
templateel-select-v2v-modelstudentplaceholder请选择学生filterable:optionsdataListvalue-keystudentIdlabel-keystudentNametemplate #default{ item }span{{ item.studentName }}哈哈哈/span/template/el-select-v2
/templatescript//局部引入import ElSelectV2 from el-select-v2export default {components: {ElSelectV2 },data() {return {dataList: [],student: ,};},created() {for (let i 0; i 10000; i) {this.dataList.push({studentId: value ${i 1},studentName: label ${i 1},});}},};
/script示例代码
示例代码
Select Attributes
参数说明类型可选值默认值value / v-model绑定值boolean / string / number——options列表数据array——value-keyvalue 键名string—valuelabel-keylabel 键名string—labelmin-item-size每个选项的最小高度number—34multiple是否多选boolean—falsedisabled是否禁用boolean—falsesize输入框尺寸stringmedium/small/mini—clearable是否可以清空选项boolean—falsecollapse-tags多选时是否将选中值按文字的形式展示boolean—falsemultiple-limit多选时用户最多可以选择的项目数为 0 则不限制number—0nameselect input 的 name 属性string——autocompleteselect input 的 autocomplete 属性string—offplaceholder占位符string—请选择filterable是否可搜索boolean—falseallow-create是否允许用户创建新条目需配合 filterable 使用boolean—falsefilter-method自定义搜索方法function——remote是否为远程搜索boolean—falseremote-method远程搜索方法function——loading是否正在从远程获取数据boolean—falseloading-text远程加载时显示的文字string—加载中no-match-text搜索条件无匹配时显示的文字也可以使用 slotempty 设置string—无匹配数据no-data-text选项为空时显示的文字也可以使用 slotempty 设置string—无数据popper-classSelect 下拉框的类名string——reserve-keyword多选且可搜索时是否在选中一个选项后保留当前的搜索关键词boolean—falsedefault-first-option在输入框按下回车选择第一个匹配项。需配合 filterable 或 remote 使用boolean—falsepopper-append-to-body是否将弹出框插入至 body 元素。在弹出框的定位出现问题时可将该属性设置为 falseboolean—trueautomatic-dropdown对于不可搜索的 Select是否在输入框获得焦点后自动弹出选项菜单boolean—false
Select Events
事件名称说明回调参数change选中值发生变化时触发目前的选中值visible-change下拉框出现/隐藏时触发出现则为 true隐藏则为 falseremove-tag多选模式下移除tag时触发移除的tag值clear可清空的单选模式下用户点击清空按钮时触发—blur当 input 失去焦点时触发(event: Event)focus当 input 获得焦点时触发(event: Event)
Select Slots
name说明—自定义模板参数为 { item }prefixSelect 组件头部内容empty无选项时的列表
Options
参数说明类型可选值默认值value选项的值string/number/object——label选项的标签若不设置则默认与 value 相同string/number——disabled是否禁用该选项boolean—false
Methods
方法名说明参数focus使 input 获取焦点—blur使 input 失去焦点并隐藏下拉框—
