vue前端实现模糊查询然后表格自动定位

最新推荐文章于 2023-08-02 11:33:03 发布

枫原七七

最新推荐文章于 2023-08-02 11:33:03 发布

阅读量364

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/yanzhe6789/article/details/129416329

版权

element input自动补全输入框 + el-table
注：这个table没有做分页，数据又多，所以才在前端添加搜索定位功能
html 自动补全输入框和 table

						<el-autocomplete
                        v-model="state"
                        clearable
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入企业名称"
                        @select="handleSelect"
                        ></el-autocomplete>
   <els-table  v-on:tpdata="getBarData" ref="elstable"  style="height:calc( 100% - 3vh )" ></els-table>

自动补全输入框对应方法

     querySearchAsync(queryString, cb) {     
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.indexOf(queryString) !== -1);  // 包含输入文字的项目
        };
      },
      handleSelect(item) {
        console.log(item);
        this.$refs.elstable.updateSpeakSentenceRow(item.index) // 将要选中的项目下标传入表格

      },
//  res.data 是后台返回的tabledata, restaurants 是table中的name和下标合成的自动补全筛选数组
  this.restaurants = res.data.map( (item,index) => {  
                     let a = {
                         value:item.name,
                         index:index
                     }
                     return a
                 } )

table
关键：:row-class-name=“tableRowClassName”

 						<el-table   
                         stripe
                        :header-cell-style="{color:'#00DEFF',
                        fontFamily:'FZZhengHeiS-EB-GB'
                        ,fontSize:this.fitChartSize(24),fontWeight:400}"
                        :data="tableData"
                        ref="tableData"
                        highlight-current-row
                        :row-class-name="tableRowClassName"
                        height="100%"
                        @row-dblclick="dblclick"
                        >
                        。。。
                          </el-table>

 //  滚动条滚动
         updateSpeakSentenceRow(e) {
                let curIndex = e;
                this.index = e;
                let vmEl = this.$refs.tableData.$el
                    // 计算滚动条的位置
                    const targetTop = vmEl.querySelectorAll('.el-table__body tr')[curIndex].getBoundingClientRect().top
                    const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
                    this.$refs.tableData.bodyWrapper.scrollTop = targetTop - containerTop;
        },
   //  选中行颜色改变
        tableRowClassName({row,rowIndex}){
            if (rowIndex == this.index) {
                return 'current-row'
            }
            return ''
        },