【Web前端问题】elementUI select 下拉组件遇到的问题

Z时代
2024-01-10
分类：技术分享

不知道大家有没有做过这种类似的组件,点击下拉按钮的时候默认数据是全部然后是按照A-Z字母排序好的,筛选那一行包括A-Z是固定不动的, 当鼠标滚动的时候, P 下边的位置才开始滚动, 点击对应字母显示对应的字母的数据, 就是点击移动高度有个transiton效果吧, 并不是tab切换,只是改变高度, 每个字母对应的数据条数不一样, 该怎么计算高度,我用的是elementUI selcet组件,样式贼难改, 然后改装了一下效果并不是想要的, 自己封装组件的不会啊, 有没有大神教我怎么做,万分感谢;
图片描述

Vue template 代码如下:

 <el-select v-model="value" placeholder="请选择" filterable popper-class="ty-select-opt"
               no-match-text name="select" class="ty-w-100" @change="handleSelect($event)">
      <div class="ty-filter-wrap">
          <span class="ty-filter">筛选</span>
          <span class="ty-alphaList" :class="{active: activeIndex === index}"
                @click="changeIndex(index)" v-for="(letter, index) in existentLetters" :key='index'>{{letter}}
          </span>
      </div>
      <el-option-group v-for="(letter, index) in existentLetters" :key="index" :label="letter">
        <el-option
          :class="{active: activeIndex === index}"
          class="ty-opg-opt"
          v-for="(item, index) in sportDatabaseOrderBy"
          v-show="letter === item.firstLetter"
          :key="item.id"
          :label="item.majorKindName"
          :value="item.majorKindName">
          <span style="color: blue">{{item.majorKindName}}</span>
          <span>{{item.activityName}}</span>
          <!--"mets": 4.5,-->
        </el-option>
      </el-option-group>
    </el-select>

export default {

data() {
  return {
    letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''),
    existentLetters: [],
    activeIndex: 0,
    active: false,
    currentActive: false,
    sportDatabaseOrderBy: [],
    sportDatabase: []
  }
},
async created () {
 await this.getEnergies()
 this.sportDatabaseOrderBy = this.sportDatabase.slice(0)  // 深拷贝
 // 获取汉字的首字母, 并赋值给对象动态添加的firstLetter属性,
 this.sportDatabaseOrderBy.map((item) => {
   let firstLetter = py.getFullChars(item.majorKindName).slice(0,1)
   item.firstLetter = firstLetter
   console.log(firstLetter)
 })
 // 字符串排序
 function compare(property){
   return (a, b) => {
     let [value1, value2] = [a[property], b[property]]
     return value1.localeCompare(value2)
   }
 }
 this.sportDatabaseOrderBy.sort(compare('firstLetter'))
 // 检出存在的数据的首字母
 for (let i = 0; i < this.letters.length; i++) {
   // console.log(this.letters.length)
   for(let j = 0; j < this.sportDatabaseOrderBy.length; j++){
     if(this.sportDatabaseOrderBy[j].firstLetter == this.letters[i]){
       this.existentLetters.push(this.letters[i])
       // console.log(this.existentLetters)
       break
     }
   }
 }
},
methods: {
// 获取后台数据
  async getEnergies () {
    try {
      const res = await getenergylist()
      this.sportDatabase = res
    }
    catch (error) {
      console.log(error)
    }
  },
// 点击字母添加了个动画. 颜色高亮, 计算高度
  changeIndex (index){
    console.log(index)
    this.activeIndex = index
    // 计算高度
    let indexLetter = this.existentLetters.slice(index, index+1)
    console.log(indexLetter)
    // 每个字母对应的数据列表条数--------**结果不对 帮忙看下逻辑哪里出了问题**
    let moveindex
    for (let i = 0; i < this.sportDatabaseOrderBy.length; i++) {
      if(this.sportDatabaseOrderBy[i].firstLetter == indexLetter){
        moveindex = i
        break
      }
    }
    console.log(moveindex)
    // 计算高度 = index*下标字母的高度 + moveindex * 每个列表的高度   ???  },

}

代码中引用了pinyin.js插件
但是不知道怎么处理多音字, 字母我是按照数据来显示的,已经排序好了,但是点击显示的条数不对, 然后筛选那块的固定,让滚动条在D下面处理不了了,并且页面缩小的时候这个宽度还会有影响整个布局因为加了个DIV;
问题: 1. 滚动条位置, 筛选固定, 2. 每个字母对应的数据条数. 3. 点击计算高度, 怎么让数据往上显示;
图片描述