el-tree目录和el-table实现搜索定位高亮方法

需求：el-tree目录实现搜索查询el-table表格项，双击表格项根据yiZhuMLID||muLuID定位el-tree目录，并且高亮展示在可视化区域内，再重新根据el-tree目录的yiZhuMLID搜索刷新el-table表格，定位且高亮展示相对应的yiZhuMLID的需求

1、先上DOM代码

    <div class="main">
      <div class="left">
        <el-tree
          ref="tree"
          class="tree"
          :data="labWorkOptions"
          :props="defaultProps"
          node-key="yiZhuMLID"
          :default-expanded-keys="currentNodekey"
          highlight-current
          @node-click="handleNodeClick"
        />
      div>
      <div class="center">
        // 封装的el-table(后面加上)
        <PublicTable
          ref="multipleTable"
          row-key="$multipleTable"
          class="table"
          :is-need-pagination="false"
          :table-data="centerTableData"
          :table-info="tableInfo"
          :need-select="true"
          :table-column="centerColumns"
          :events="centerEvents"
          :has-operation="false"
        />
        <div class="centerSearch">
          <el-input
            v-model="queryString"
            class=""
            size="small"
            clearable
            placeholder="请输入格式拼音/五笔首码搜索"
            @clear="onSearch"
            @keyup.enter.native="onSearch"
          />
          <el-button
            size="small"
            class="el-button-color"
            style="margin-right: 10px"
            icon="el-icon-search"
            @click="onSearch"
          >
            查询
          el-button>
        div>
      div>
      <div class="right">
        <PublicTable
          ref="publicTable"
          class="table"
          :is-need-pagination="false"
          :table-data="rightData"
          :table-info="tableInfo"
          :table-column="rightColumns"
          :has-operation="false"
        />
      div>
    div>

2、样式Style代码

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  overflow: auto;
}
.title {
  font-size: 15px;
  font-weight: 600;
  padding: 0 8px;
  border-left: 3px solid #21c5c8;
}
.main {
  display: flex;
  width: 100%;
  height: 100%;
  .left {
    flex: 1;
    max-width: 25%;
    overflow: auto;
    ::v-deep .tree {
      height: 500px;
    }
  }
  .center {
    max-width: 29%;
    height: 500px;
    .centerSearch {
      display: flex;
      flex-direction: row;
    }
    .table {
      height: calc(500px - 15px);
      overflow: auto;
    }
  }
  .right {
    flex: 1;
    max-width: 50%;
    height: 500px;
  }
}
::v-deep .handle-dialog {
  height: 100%;
  margin-top: 10px;
}
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
style>

3、JS代码

4、el-table的封装

<script>
// 自定义组件的内容
const exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    },
    defaultValue: [Number, String]
  },
 
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    const defaultValue = ctx.props.defaultValue
    params.column = ctx.props.column || {}
    return h(
      'div',
      {
        class: [
          params.column.prop || '',
          params.column.class || params.column.className || ''
        ].join('')
      },
      [ctx.props.render(h, params) || defaultValue]
    )
  }
}
export default {
  name: 'PublicTable',
  components: {
    'ex-slot': exSlot
  },
  props: {
    // key
    rowKey: {
      type: String,
      default: ''
    },
    // 超出行是否隐藏不换行
    showOverflowTooltip: {
      type: Boolean,
      default: true
    },
    // 是否需要多选
    needSelect: {
      type: Boolean,
      default: false
    },
    // 是否需要序号
    hasIndex: {
      type: Boolean,
      default: false
    },
    // 是否需要分页
    isNeedPagination: {
      type: Boolean,
      default: true
    },
    // 是否单页隐藏，默认为true
    isSinglePageHide: {
      type: Boolean,
      default: false
    },
    // 当前页页码，支持.sync修饰符
    currentPage: {
      type: Number,
      default: 1
    },
    // 页码显示数据量
    pagerCount: {
      type: Number,
      default: 7
    },
    // 每页数据条数, 支持.sync修饰符默认为每页10条
    pageSize: {
      type: Number,
      default: 20
    },
    // 数据总条数
    total: {
      type: Number,
      default: 0
    },
    // 每页多少数据
    pageSizes: {
      type: Array,
      required: false,
      default: () => [20, 40, 80, 100]
    },
    tableInfo: {
      type: Object,
      default: () => {}
    },
    // 获取数据时是否需要加载loading
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格展示数据
    tableColumn: {
      type: Array,
      default: () => []
    },
    // 是否需要操作列
    hasOperation: {
      type: Boolean,
      default: true
    },
    // 操作列
    btnButton: {
      type: Array,
      default: () => []
    },
    // 操作列宽度
    operationWidth: {
      type: String,
      default: '120px'
    },
    // 表格方法
    events: {
      type: Object,
      default: () => {}
    },
    templateSelectAll: {
      type: Boolean,
      default: false
    },
    // 合并单元格
    objectSpanMethod: {
      type: Function,
      default: () => {}
    },
    muBanAllToggleSelection: {
      type: Function,
      default: () => {}
    },
    selectAllTemplate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    computedCurrentPage: {
      get() {
        return this.currentPage
      },
      set(val) {
        this.$emit('update:currentPage', val)
      }
    },
    computedPageSize: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    },
    tableHeight() {
      return !this.isNeedPagination ? '100%' : 'calc(100% - 47px)'
    }
  },
  mounted() {},
  methods: {
    getTableRef() {
      return this.$refs.tableData
    },
    getRefPagination() {
      return this.$refs.pagination
    },
    // 页面切换事件  通过 @currentChange 绑定
    currentChange(val) {
      this.$emit('currentChange', val)
    },
    // 每页条数切换事件，通过@sizeChange 绑定
    sizeChange(val) {
      this.$emit('sizeChange', val)
    },
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    }
  }
}
script>
<style lang="scss" scoped>
.table-box {
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
style>

5、el-table定位数据高亮的方法

/**
 * table表格数据定位
 * @param {value} 查询的value唯一值
 * @param {tabKey} tableData数据中的key属性
 * @param {tableData} table表格数据源tableData
 * @param {tableRefs} table表格标签tableRefs
 * @returns
 */
function tableLocateKey(value, tabKey, tableData, tableRefs) {
  let index = tableData.findIndex((i) => {
    return value === i[tabKey]
  })
  let vm = tableRefs.$el
  vm.querySelectorAll('.el-table__body tr')[index].scrollIntoView()
  //让定位到的这条数据产生高亮效果
  tableRefs.setCurrentRow(tableData[index])
}