Vue+element项目实现搜索表格字段，让表格滚动到相应的位置

2019-05-26

前言

最近开始跟着大神做Vue的项目，虽然之前学过Vue，但一开始着手开发项目的时候还是以模仿代码为主。由于做的是后台管理的项目，所以最主要的还是结合element框架实现界面，调用接口就可以了。后期由于字段太多，导致查找一个相关字段很是费劲。所以提出了一个需求：实现搜索表格字段，让表格滚动到相应的位置。

相关代码

html

<div class="search-field-box">
 	<label>查询字段：</label>
    <input class="search-field" @input="fieldInput" placeholder="请输入关键字"  v-model="searchField" @keyup.enter="searchParam">
</div>
<el-table ref="demoWrapper"></el-table>

data(){
    return: {
        searchField: '',  //输入的查询字段
        searchIndex: ''   //字段所在数组的索引
    }
}
methods: {
    fieldInput(){
        // 当输入框没有值时，滚动条滚动到最左边，并且取消高亮
        if(!this.searchField){
          this.$refs.demoWrapper.bodyWrapper.scrollLeft = 0;
          var thChildren =this.$refs.demoWrapper.$refs.headerWrapper.querySelector('thead').querySelectorAll('th');
          thChildren.forEach(item => {
            item.style.backgroundColor = "#eff2f7";
            item.style.borderBottom= '1px solid #EBEEF5';
          })
        }
      },
      searchParam(){
        var scrollWrapper = this.$refs.demoWrapper.bodyWrapper;
        var fieldList=[];
        //获取所有表头字段
        var thChildren =this.$refs.demoWrapper.$refs.headerWrapper.querySelector('thead').querySelectorAll('th');
        var totalPosition = 0;
        var isExist = false;
        thChildren.forEach(item => {
          //获取所有表头字段，放入fieldList数组中
          if(item.innerText){
            fieldList.push(item.innerText);
          }
        });
        fieldList.forEach((item,index) => {
          if(this.fuzzyQuery(fieldList,this.searchField) == item){
            this.searchIndex = index;
            isExist = true;
          }
        })
        if(!isExist){
          this.$message.warning('该字段不存在！');
          this.searchField = '';
        }
        thChildren.forEach((item,index) => {
          //获取到搜索字段的索引，求字段到最左边的距离
          if(index < this.searchIndex){
            totalPosition += item.offsetWidth;
          }
          //改变搜索到字段的样式
          if(this.searchIndex === index){
            item.style.backgroundColor = "#fff";
            item.style.borderBottom= '1px solid red';
          }else{
            item.style.backgroundColor = "#eff2f7";
            item.style.borderBottom= '1px solid #EBEEF5';
          }
        })
        scrollWrapper.scrollLeft = totalPosition;
      },
      //模糊查询
      fuzzyQuery(list, keyWord) {
        var reg =  new RegExp(keyWord);
        var arr = [];
        for (var i = 0; i < list.length; i++) {
          if (reg.test(list[i])) {
            arr.push(list[i]);
          }
        }
        return arr[0];
      },
}

注意的地方

1.this.$refs.demoWrapper 这样是获取不到table标签的，它是一个对象。表示table标签的是里面的bodyWrapper。

2.使用正则实现模糊查询（只要输入字段中的任何一个字就可以实现查询）。