网站建设 核算,扬州服务器租用,深圳网站设计公司哪种,企业手机网页设计虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装
本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面
templatediv el-select transfertrue :popper-append-to-bodytruepopper-class… 虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装
本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面
templatediv el-select transfertrue :popper-append-to-bodytruepopper-classvirtualselectclassvirtual-select-custom-style:valuedefaultValuefilterable:filter-methodfilterMethoddefault-first-optionclearable:placeholderplaceholderParams:multipleisMultiple:allow-createallowCreatevisible-changevisibleChangev-on$listenersclearclearChangevirtual-listrefvirtualListclassvirtualselect-list:data-keyvalue:data-sourcesselectArr:data-componentitemComponent:keepskeepsParams:extra-props{label: label,value: value,labelTwo:labelTwo,isRight: isRight,isConcat: isConcat,isConcatShowText:isConcatShowText,concatSymbol: concatSymbol}/virtual-list/el-select/div
/template
scriptimport {validatenull} from /utils/validate.jsimport virtualList from vue-virtual-scroll-listimport ElOptionNode from ./el-option-nodeexport default {components: {virtual-list: virtualList},model: {prop: bindValue,event: change},props: {// 数组list: {type: Array,default() {return []}},// 显示名称1label: {type: String,default: },// 显示名称2 labelTwo: {type: String,default: },// 标识value: {type: String,default: },// 是否拼接label | valueisConcat: {type: Boolean,default: false},isConcatShowText:{type: Boolean,default: false},// 拼接label、value符号concatSymbol: {type: String,default: | },// 显示右边isRight: {type: Boolean,default: false},// 加载条数keepsParams: {type: Number,default: 10},// 绑定的默认值bindValue: {type: [String, Array,Number],default() {if (typeof this.bindValue string) return return []}},// 是否多选isMultiple: {type: Boolean,default: false},placeholderParams: {type: String,default: 请选择},// 是否允许创建条目allowCreate: {type: Boolean,default: true}},data() {return {itemComponent: ElOptionNode,selectArr: [],defaultValue: null // 绑定的默认值}},watch: {list() {this.init()},bindValue: {handler(val, oldVal) {this.defaultValue this.bindValueif (validatenull(val)) this.clearChange()this.init()},immediate: false,deep: true}},mounted() {this.defaultValue this.bindValuethis.init()},methods: {init() {if (!this.defaultValue || this.defaultValue?.length 0) {this.selectArr this.list} else {// 回显问题// 由于只渲染固定keepsParams10条数据,当默认数据处于10条之外,在回显的时候会显示异常// 解决方法:遍历所有数据,将对应回显的那一条数据放在第一条即可this.selectArr JSON.parse(JSON.stringify(this.list))if (typeof this.defaultValue string !this.isMultiple) {let obj {}if (this.allowCreate) {const arr this.selectArr.filter(val {return val[this.value] this.defaultValue})if (arr.length 0) {const item {}// item[this.value] Create-${this.defaultValue}item[this.value] this.defaultValueitem[this.label] this.defaultValueitem.allowCreate truethis.selectArr.push(item)this.$emit(selChange, item)} else {this.$emit(selChange, arr[0])}}// 单选for (let i 0; i this.selectArr.length; i) {const element this.selectArr[i]// if (element[this.value]?.toLowerCase() this.defaultValue?.toLowerCase()) {if (element[this.value] this.defaultValue) {obj elementthis.selectArr?.splice(i, 1)break}}this.selectArr?.unshift(obj)} else if (this.isMultiple) {if (this.allowCreate) {this.defaultValue.map(v {const arr this.selectArr.filter(val {return val[this.value] v})if (arr?.length 0) {const item {}// item[this.value] Create-${v}item[this.value] vitem[this.label] vitem.allowCreate truethis.selectArr.push(item)this.$emit(selChange, item)} else {this.$emit(selChange, arr[0])}})}// 多选for (let i 0; i this.selectArr.length; i) {const element this.selectArr[i]this.defaultValue?.map(val {// if (element[this.value]?.toLowerCase() val?.toLowerCase()) {if (element[this.value] val) {obj elementthis.selectArr?.splice(i, 1)this.selectArr?.unshift(obj)}})}}}},// 搜索filterMethod(query) {if (!validatenull(query?.trim())) {this.$refs.virtualList.scrollToIndex(0) // 滚动到顶部setTimeout(() {this.selectArr this.list.filter(item {return this.isRight || this.isConcat? (item[this.label].trim()?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) -1 || (item[this.labelTwo])?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) -1): item[this.label]?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) -1// return this.isRight || this.isConcat? (item[this.label].trim().indexOf(query.trim()) -1 || (item[this.value]).trim().indexOf(query.trim()) -1)// : item[this.label].indexOf(query.trim()) -1})}, 100)} else {setTimeout(() {this.init()}, 100)}},visibleChange(bool) {if (!bool) {this.$refs.virtualList.reset()this.init()}},clearChange() {if (typeof this.defaultValue string) {this.defaultValue } else if (this.isMultiple) {this.defaultValue []}this.visibleChange(false)}}}
/script
style langscss scoped.virtual-select-custom-style{width:100% !important;}
.virtual-select-custom-style ::v-deep .el-select-dropdown__item {// 设置最大宽度超出省略号鼠标悬浮显示// options 需写 :titlesource[label]min-width: 300px;max-width: 480px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.virtualselect {// 设置最大高度-list {max-height:245px;overflow-y:auto;}
}
::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;cursor: pointer;margin-right: 5px;
}
::-webkit-scrollbar-thumb {background-color: rgba(144,147,153,.3) !important;border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover{background-color: rgba(144,147,153,.5) !important;
}
::-webkit-scrollbar-track {background-color: transparent !important;border-radius: 3px !important;-webkit-box-shadow: none !important;
}
::v-deep .el-select__tags {flex-wrap: unset;overflow: auto;
}
/style新建一个组件 el-option-node.vue
templateel-option:keylabelvalue:labelconcatString2(source[label], source[labelTwo]):valuesource[value]:disabledsource.disabled:titleconcatString2(source[label], source[labelTwo])span {{ concatString(source[label], source[labelTwo]) }}/spanspanv-ifisRightstylefloat:right;color:#939393{{ source[value] }}/span/el-option
/template
scriptexport default {name: ItemComponent,props: {// 每一行的索引index: {type: Number,default: 0},// 每一行的内容source: {type: Object,default() {return {}}},// 需要显示的名称label: {type: String,default: },// 需要显示的名称labelTwo: {type: String,default: },// 绑定的值value: {type: String,default: },// 是否拼接label | valueisConcat: {type: Boolean,default: false},isConcatShowText:{type: Boolean,default: false},// 拼接label、value符号concatSymbol: {type: String,default: | },// 右侧是否显示绑定的值isRight: {type: Boolean,default() {return false}}},methods: {//选择后 只显示label//张三concatString(a, b) {a a || b b || if (this.isConcat) {// return a ((a b) ? | : ) breturn a ((a b) ? this.concatSymbol : ) b}return a},//选择下拉展示时 可以展示label和labelTwo//123||张三concatString2(a, b) {a a || b b || if (this.isConcat) {// return a ((a b) ? | : ) bif(this.isConcatShowTexttrue){return a ((a b) ? this.concatSymbol : ) b}else{return a}}return a}}}
/script
组件建议完成后 在页面使用
list:数据 [{name‘张三’code‘098’},{}] label:要显示的字段1 labelTwo要显示的字段2 concat-symbol拼接符号 is-concat是否拼接 is-multiple是否多选 allowCreate是否可以创建目录 change 事件 keeps-params数据多少条
templatedivvirtual-select v-modelitem.contractGodsId:listgoodsList labelname labelTwocode valueid :placeholder-params请选择产品:keeps-params10 :is-concattrue :isConcatShowTextfalse:concat-symbol || :is-multiplefalse :allowCreatefalsechangegoodsChange($event,$index) //div
/template引入组件import VirtualSelect from /views/components/virtualList/selectexport default {components: {VirtualSelect},}如果label和labelTwo都填写了显示效果如下 本虚拟列表 要求一次性加载完所有数据 不适合分页
