vue动态表格以及搜索内容高亮显示

展示效果

需求

表格根据后端返回的数据，动态展示行和列
输入搜索内容后，对对应的文本进行高亮显示
左侧可以筛选要展示的列

实现

表格样式

<!--      头部-->
<div style="background: #f3f6fb">
  <template v-for="(item, index) in listHeader.list">
    <div
      :key="index"
      class="table-content table-title-container"
      :title="listHeader.title[index]"
      :style="{ width: `${changeWidth(item) ? changeWidth(item) : headerWidth}` }"
    >
      <div style="display: inline-block">{{ item }}</div>
      <div
        @click="sortList(item)"
        style="
          display: inline-block;
          position: relative;
          width: 10px;
          height: 10px;
          cursor: pointer;
        "
        v-if="item.indexOf('timestamp') !== -1 || item.indexOf('timeStamp') !== -1"
      >
        <svg-icon class="table-title-svg" icon-class="topic-sort"></svg-icon>
      </div>
    </div>
  </template>
</div>
<!--      表格内容-->
<template v-for="(item, index) in searchList.list">
  <div class="line-content" :key="index + '-'" v-if="Object.entries(item).length > 0">
    <div class="line-height" :style="{ width: `${listWidth + 'px'}` }">
      <template v-for="(item1, index1) in listHeader.list">
        <div
          :key="index1"
          class="table-content"
          :style="{ width: `${changeWidth(item1) ? changeWidth(item1) : headerWidth}` }"
        >
          <div
            class="table-newline"
            v-if="item1.indexOf('timestamp') !== -1 || item1.indexOf('timeStamp') !== -1"
            style="color: #3096ff"
            v-html="switchPosition(item, item1)"
          />
          <div class="table-newline" v-else v-html="switchPosition(item, item1)"></div>
        </div>
      </template>
    </div>
    <a-divider class="table-divider" :style="{ width: `${listWidth + 'px'}` }"></a-divider>
  </div>
</template>

css样式

.table-content {
  text-align: center;
  position: relative;
  display: inline-block;
}
.table-title-container {
  background: #f3f6fb;
  padding: 10px 0;
}
.table-title-svg {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
}
.line-content {
  max-height: 401px;
  margin: 5px 0;
}
.line-height {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.table-newline {
  padding: 8px 8px;
  height: 95%;
  display: flex;
  flex-direction: column;
  word-break: break-word;
  white-space: normal;
}
.table-divider {
  margin: 5px 0;
}

表格内容排列

switchPosition(value, header) {
 let res = '--';
 Object.entries(value).forEach((item) => {
   if (item[0] === header) {
     res = item[1];
   } else if (item[1] && typeof item[1] === 'object') {
     Object.entries(item[1]).forEach((items) => {
       if (items[0] === header) {
         res = items[1];
       }
     });
   }
 });
 if (res != null) {
   return this.brightenKeyword(res, this.content);
 } else return '--';
},
changeWidth(value) {
 if (this.listWidth === this.screenWidth) {
   this.headerWidth = (this.screenWidth - this.width) / this.length + 'px';
 } else {
   return value.length * 10 + 'px';
 }
},

表格搜索高亮

//搜索高亮
brightenKeyword(val, keyword) {
  if (
    Object.prototype.toString.call(val) !== '[object Array]' &&
    Object.prototype.toString.call(val) !== '[object Object]'
  ) {
    return this.replaceWord(val, keyword);
  } else if (
    Object.prototype.toString.call(val) === '[object Array]' ||
    Object.prototype.toString.call(val) === '[object Object]'
  ) {
    return this.replaceWord(JSON.stringify(val), keyword);
  } else return val;
},
replaceWord(val, keyword) {
  val = val + '';
  if (val.indexOf(keyword) !== -1 && keyword !== '') {
    //关键词替换
    val = val.replace(
      new RegExp(keyword, 'g'),
      '<span style="background-color: #FFAD0F">' + keyword + '</span>'
    );
    //解决文字换行问题
    val = '<span>' + val.replace(/\n/g, '</span> <span>') + '</span>';
    return val;
  } else return val;
},

数据格式处理

后端返回的数据格式

this.searchList = {
	"_hik_ingest_timestamp":"2021-08-13T07:25:31.545045Z",
	"brake_system_status":{
		"brake_padel":1
	}
	"exterior_lights":{
		"all_lights_off":0,
		"automatic_light_control":0,
		"daytime_running_lights":0,
		"fog_lights":0,
		"high_beam_head_lights":0
	}
	"motion":{
		"speed":22.222222
	}
	"obuEsn":"27567864",
	"obuId":"obu_123"
}

解析json格式

生成表头和对应内容

this.searchList.forEach((item) => {
 Object.entries(item).forEach((items) => {
   if (items[1] && Object.prototype.toString.call(items[1]) === '[object Object]') {
     Object.entries(items[1]).forEach((item1) => {
       if (this.listHeader.list.indexOf(item1[0]) === -1) {
         this.listHeader.list.push(item1[0]);
         this.listHeader.title.push(items[0] + '.' + item1[0]);
       }
     });
   } else if (this.listHeader.list.indexOf(items[0]) === -1) {
     this.listHeader.list.push(items[0]);
     this.listHeader.title.push(items[0]);
   }
 });
});

表头字段筛选功能

//增加选定字段
 pushField(item) {
   this.chooseField.push(item);
   this.fieldList.splice(this.fieldList.indexOf(item), 1);
   this.queryParams.fields.push(item.fieldName);
   this.getSearchList();
   this.onSearch();
 },
 //删除选定字段
 popField(item) {
   this.fieldList.push(item);
   this.chooseField.splice(this.chooseField.indexOf(item), 1);
   this.queryParams.fields.splice(this.queryParams.fields.indexOf(item.fieldName), 1);
   this.getSearchList();
   this.onSearch();
 },
 //字段搜索
 onSearch() {
   if (this.field) {
     let newArr = [],
       chooseArr = [];
     this.fieldList.forEach((item) => {
       if (item.fieldName.indexOf(this.field) !== -1) {
         newArr.push(item);
       }
     });
     this.searchFieldList = newArr;
     this.chooseField.forEach((item) => {
       if (item.fieldName.indexOf(this.field) !== -1) {
         chooseArr.push(item);
       }
     });
     this.searchChooseField = chooseArr;
   } else {
     this.searchFieldList = this.fieldList;
     this.searchChooseField = this.chooseField;
   }
 },