通过el-input的input事件和el-scrollbar实现简单的搜索+滚动列表

₍•ʚ•₎呀呀

已于 2023-03-30 15:07:38 修改

阅读量857

点赞数 1

分类专栏： element-plus 文章标签： vue.js 前端 javascript

于 2023-03-23 09:12:28 首次发布

本文链接：https://blog.csdn.net/weixin_60886885/article/details/129723610

版权

element-plus 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现效果：

html结构

              <div class="infinite-scroll" v-show="isShowScroll" @click.stop ref="selectDataRulesRef">
                <div class="infinite-list">
                  <!-- 搜索输入框 -->
                  <div class="p-5">
                    <el-input v-model.trim="searchInputValue" @input="searchInputChange">
                      <template #prefix>
                        <app-svg-icon icon-name="search" class="w-19 h-19 search-icon" />
                      </template>
                    </el-input>
                  </div>

                  <!-- 滚动列表 -->
                  <ul class="border-t border-gray-200 py-4 overflow-y-auto flex-1">
                    <el-scrollbar height="200px">
                      <!-- <li v-for="item in 20" :key="item" class="py-6 overflow-hidden flex items-center justify-between hover:bg-gray-200 cursor-pointer rounded-md"> -->
                      <li
                        v-for="(item, index) in totalData.dataProcessingRulesRst"
                        :key="index"
                        class="cursor-pointer infinite-list-item overflow-hidden"
                        @click="handleSelectDataProcessingRule(item)"
                      >
                        <div class="flex-column">
                          <div class="w-250 text-ellipsis">{{ item.RuleName }}</div>

                          <div class="list-desc w-250 text-ellipsis">{{ '创自 ' + item.Creator + ' · ' + item.CreateTime }}</div>
                        </div>
                      </li>
                    </el-scrollbar>
                  </ul>
                  
                </div>
              </div>

scss样式

.infinite-scroll {
  .infinite-list {
    position: absolute;
    left: 215px;
    right: 0px;
    background: #ffffff;
    width: 320px;
    box-shadow: 0px 0px 0px 1px rgba(11, 11, 45, 0.09), 0px 8px 12px -4px rgba(82, 82, 82, 0.12), 0px 16px 24px -8px rgba(82, 82, 82, 0.12);
    border-radius: 7px;
    // height: 250px;
    z-index: 9999;
    padding: 0;
    margin: 0;
    list-style: none;
    .list-desc {
      font-size: 12px;
      color: #6e7381;
    }
  }
  .infinite-list .infinite-list-item {
    padding-left: 5px;
    display: flex;
    align-items: center;
    height: 50px;
    margin: 10px;
  }
  .infinite-list .infinite-list-item:hover {
    background: rgba(188, 189, 194, 0.2);
    border-radius: 6px;
  }
  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }
}

js区域：主要是通过searchInputChange这个方法实现的

1、定义列表数据初始值以及搜索筛选初始值

const totalData = reactive({
  dataProcessingRules: [//规则列表数据
    { Id: 40613066968, RuleName: '倍率放电测试', Creator: 'AAA', CreateTime: 1679456132, Remark: '贝瑞' },
    { Id: 40614430296, RuleName: '分容', Creator: 'AAA', CreateTime: 1679451240, Remark: '贝瑞' },
  ],
  dataProcessingRulesRst: [], //搜索筛选之后的规则列表
  
})

2、在onMounted区域通过接口获取列表数据，并赋值给筛选过后的数据

onMounted(() => {
  // 获取规则列表
  api.dataProcessing.getgetDataCalcRuleList().then(res => {
   
    if (res != null && res[0] != null && res[0].status == 200) {
      totalData.dataProcessingRules = cloneDeep(res[0].data)
      // 修改时间格式
      totalData.dataProcessingRules.forEach((item, index) => {
        if (item.CreateTime) {
          let date = moment(item.CreateTime * 1000).format('YYYY-MM-DD HH:mm:ss')

          item.CreateTime = date
        }
      })

      totalData.dataProcessingRulesRst = totalData.dataProcessingRules//赋值
    }
  })

3、事件逻辑

const searchInputChange = (value: any) => {
  if (null === value || undefined === value || ' ' === value) {
    totalData.dataProcessingRulesRst = totalData.dataProcessingRules
  } else {
    totalData.dataProcessingRulesRst = [] // 结果列表置空
    let regStr = ''
    // 初始化正则表达式
    for (let i = 0; i < value.length; i++) {
      regStr = regStr + '(' + value[i] + ')([\\s]*)' //跨字匹配
    }
    let reg = new RegExp(regStr)
    // console.log(reg)
    for (let i = 0; i < totalData.dataProcessingRules.length; i++) {
      let name = totalData.dataProcessingRules[i].RuleName //按照名字匹配
      let regMatch = name.match(reg)
      if (null !== regMatch) {
        // 将匹配的数据放入结果列表中
        totalData.dataProcessingRulesRst.push(totalData.dataProcessingRules[i])
      }
    }
  }
}