VUE-Element组件（八）Select选择器

蔚落 2023-02-21 06:57 378阅读 0赞

一、el-select加载大数据渲染卡顿解决方法:

1、方法1：一次性渲染大量数据问题，如业务场景是后台一次返回10万多条数据需要在下拉框中展示：

<template>
        <div class="content">
             <el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
                 <el-option
                 v-for="(item, index) in list.slice(0, rangeNumber)" 
                 :key="index"
                 :label="item.label"
                 :value="item.value"></el-option>
             </el-select>
        </div>
    </template>
     
    <script>
    import Vue from "vue";
    Vue.directive(
        'el-select-loadmore', {
            bind(el, binding) {
                let self = this
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    /**
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                    const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    if (condition) binding.value()
                });
            }
        }
    )
    export default {
        data() {
            return {
               list: [],
               choose: "",
               rangeNumber: 10,
            }
        },
        created(){
           this.getList()
        },
        methods: {
            getList(){
                for(let i = 0; i < 100000; i++){
                    this.list.push({
                       label: "menu",
                       value: "menu"
                    })
                }//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
            },
            loadMore(n){
                //n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
                //if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
                return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数  可自定义
            },
        }
    }
    </script>
     
    <style lang="less" scoped>
    .content{
       padding: 24px 24px;
       .el-input{
           width: 400px;
           margin: 20px;
       }
    }
    </style>

2、方法2：搜索解决：10万条数据客户不可能一直滚动下去找自己想要数据,这时候就需要搜索解决

下面代码没有用el-select搜索是因为在使用过程中发现模糊查询不能满足自己,所以自己就写了一个input框,使用watch监听,详情见代码

<template>
        <div class="content">
             <el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
                 <el-input v-model="search" size="small" placeholder="请输入搜索内容"></el-input>
                 <el-option
                 v-for="(item, index) in list.slice(0, rangeNumber)" 
                 :key="index"
                 :label="item.label"
                 :value="item.value"></el-option>
             </el-select>
        </div>
    </template>
     
    <script>
    import Vue from "vue";
    Vue.directive(
        'el-select-loadmore', {
            bind(el, binding) {
                let self = this
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    /**
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                    const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    if (condition) binding.value()
                });
            }
        }
    )
    export default {
        data() {
            return {
               list: [],
               choose: "",
               rangeNumber: 10,
               stashList: [],
               search: ""
            }
        },
        created(){
           this.getList()
        },
        watch: {
            search(newVal, oldVal){
                if(newVal){
                    this.list = this.stashList
                    this.list = this.list.filter(item => {
                        if(item.label.includes(newVal)){
                            return item
                        }
                    })
                }else{
                    this.list = this.stashList
                }
            }
        },
        methods: {
            getList(){
                for(let i = 0; i < 100000; i++){
                    this.list.push({
                       label: "menu" + i,
                       value: "menu" + i
                    })
                }//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据
                this.stashList = this.list
            },
            loadMore(n){
                //n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
                //if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
                return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数  可自定义
            },
        }
    }
    </script>
     
    <style lang="less" scoped>
    .content{
       padding: 24px 24px;
       .el-input{
           width: 400px;
           margin: 20px;
       }
    }
    </style>

3、远程搜索下拉：不需要加载列表即可回显v-model绑定的值，常用于下拉列表数据量较大的场景

<template>
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <script>
      export default {
        data() {
          return {
            options: [],
            value: [],
            list: [],
            loading: false,
            states: ["Alabama", "Alaska", "Arizona", "Washington", "West Virginia"]
          }
        },
        mounted() {
          this.list = this.states.map(item => {
            return { value: `value:${item}`, label: `label:${item}` };
          });
        },
        methods: {
          remoteMethod(query) {
            if (query !== '') {
              this.loading = true;
              setTimeout(() => {
                this.loading = false;
                this.options = this.list.filter(item => {
                  return item.label.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
              }, 200);
            } else {
              this.options = [];
            }
          }
        }
      }
    </script>

二、element-ui 遮罩层el-dialog 中间内容被被蒙板遮住，在在 el-dialog 标签里添加 :append-to-body="true"可以解决

三、样式：

1、选项过多以省略号展示：

/deep/ .el-select__tags {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /deep/ .el-select .el-tag__close.el-icon-close {
        top: -7px;
      }

如：

![20210415140547101.png][]

[20210415140547101.png]: https://img-blog.csdnimg.cn/20210415140547101.png