virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化

  • virtualList 组件封装

virtualList 组件封装

本虚拟列表 要求一次性加载完所有数据 不适合分页
新建一个select.vue 组件页面




新建一个组件 el-option-node.vue



 

组件建议完成后 在页面使用:

list:数据 [{name:‘张三’,code:‘098’},{}] label:要显示的字段1 labelTwo:要显示的字段2
concat-symbol:拼接符号 is-concat是否拼接 is-multiple:是否多选 allowCreate是否可以创建目录 @change 事件 keeps-params数据多少条



引入组件
	import VirtualSelect from '@/views/components/virtualList/select'
	export default {
		components: {
			VirtualSelect
		},
	}

如果label和labelTwo都填写了,显示效果如下

virtualList 封装使用 虚拟列表 列表优化_第1张图片

本虚拟列表 要求一次性加载完所有数据 不适合分页

你可能感兴趣的:(javascript,vue.js,前端)