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-treeref="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(后面加上)<PublicTableref="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-inputv-model="queryString"class=""size="small"clearableplaceholder="请输入格式拼音/五笔首码搜索"@clear="onSearch"@keyup.enter.native="onSearch"/><el-buttonsize="small"class="el-button-color"style="margin-right: 10px"icon="el-icon-search"@click="onSearch">查询</el-button></div></div><div class="right"><PublicTableref="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代码

<script>
import {getHYXMMXWHByIdItem,getItemByPinyinWubi
} from '@/api/menZhenAPI/huaYanjiChu/huaYanXMMLMXWH'
export default {name: 'HuaYanMNKDDialog',props: {labWorkOptions: {type: Array,default: () => []},value: {type: Boolean,default: false},data: {type: Object,default: () => ({})},rightTableData: {type: Array,default: () => []}},data() {return {currentNodekey: [],formData: {},yiZhuMLID: '',queryString: '',leftTableData: [],centerTableData: [],tableData: [],defaultProps: {children: 'children',label: 'yiZhuMLMC'},addData: [],tableInfo: {},rightData: [],leftEvents: {'row-click': (row) => {this.getHuaYanXMById(row)}},centerEvents: {select: (selection, row) => {console.log('selection', selection)console.log('row', row)const flag = this.rightData.findIndex((item) => item.huaYanID === row.huaYanID)if (flag === -1) {if (row.lianDongHao !== null) {this.centerTableData.forEach((item) => {if (item.lianDongHao === row.lianDongHao) {this.rightData.push({muLuID: item.muLuId,huaYanID: item.huaYanID,huaYanXMMC: item.huaYanXMMC,paiXu: item.paiXu,lianDongHao: item.lianDongHao,zhuCiXiang: null})console.log('item', item)console.log('this.rightData', this.rightData)}})} else {this.rightData.push({muLuID: row.muLuId,huaYanID: row.huaYanID,huaYanXMMC: row.huaYanXMMC,paiXu: row.paiXu,lianDongHao: row.lianDongHao,zhuCiXiang: null})console.log(this.rightData)}} else {if (row.lianDongHao === null) {this.rightData.splice(flag, 1)} else {this.centerTableData.forEach((item) => {if (item.lianDongHao === row.lianDongHao) {const index = this.rightData.findIndex((item) => item.huaYanID === row.huaYanID)this.rightData.splice(index, 1)}})}this.$refs.multipleTable.getTableRef().clearSelection()}this.chenckByHuaYanID()},// 这是主要方法其他地方的函数方法可以尽量不看'row-dblclick': (row) => {const currentKey = row.yiZhuMLID || row.muLuIDthis.$nextTick(() => {// tree节点的id// this.currentNodekey = row.yiZhuMLID || row.muLuIDthis.currentNodekey = []for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {if (currentKey === this.$refs.tree.store._getAllNodes()[i].data.yiZhuMLID) {this.$refs.tree.setCurrentKey(currentKey)this.currentNodekey.push(currentKey)}}getHYXMMXWHByIdItem(currentKey).then((res) => {if (res.data) {console.log(row)this.centerTableData = res.datathis.chenckByHuaYanID()// 获取数据后定位setTimeout(() => {this.$tools.tableLocateKey(row.huaYanID,'huaYanID',this.centerTableData,this.$refs['multipleTable'].$refs.tableData)}, 200)// 让高亮元素出现在视图区域document.querySelector('.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content').scrollIntoView()}})})}},leftColumns: [{label: '化验项目名称',prop: 'mingCheng',minWidth: '120px'}],centerColumns: [{label: '请选择化验项目',prop: 'huaYanXMMC',minWidth: '120px'}],rightColumns: [{prop: 'huaYanXMMC',label: '化验项目名称',minWidth: '150px'},{prop: '',label: '类别',minWidth: '50px'},{prop: '',label: '医保类别',minWidth: '80px'},{prop: '',label: '目录名称',minWidth: '80px'},{prop: '',label: '状态标志',minWidth: '80px'},{prop: '',label: '医嘱备注',minWidth: '80px'},{prop: '',label: '首次录入时间',minWidth: '120px'},{prop: '',label: '医嘱用户',minWidth: '80px'}],operations: [{text: '删除',type: 'text',class: 'el-text-color-del',callback: (row) => {this.delHandleCancelFormClick(row)}}]}},computed: {visible: {get() {return this.value},set(value) {this.$emit('update:value', false)}}},watch: {visible(val) {if (val) {this.rightData = Object.assign([], this.rightTableData)this.queryString = ''} else {this.centerTableData = []}}},created() {},methods: {onSearch() {getItemByPinyinWubi({key: this.queryString,zhenLiaoLX: this.data.zhenLiaoLX}).then((res) => {if (res) {this.centerTableData = res.data.map((item) => {return {huaYanID: item['huaYanID'],huaYanXMMC: item['huaYanMC'],yiZhuMLID: item['yiZhuMLID'],yiZhuMLMC: item['yiZhuMLMC']}})this.queryString = ''}})},}
}
</script>

4、el-table的封装

<template><div class="table-box"><el-tableref="tableData"v-loading="loading"style="width: 100%":row-key="rowKey":data="tableData":height="tableHeight"highlight-current-rowv-bind="tableInfo":span-method="objectSpanMethod"v-on="events"@selection-change="handleSelectionChange"><slot name="expand" /><el-table-column v-if="selectAllTemplate" min-width="140" label="全选模板列表"><template slot-scope="{ row }"><div><el-checkboxv-model="row.all"@change="muBanAllToggleSelection($event, tableData, row)">{{ row.muBanMC }}</el-checkbox></div></template></el-table-column><!-- 多选 --><el-table-columnv-if="needSelect"type="selection"reserve-selectionwidth="55"align="center"/><el-table-column v-if="hasIndex" label="序号" width="50" type="index" /><template v-for="(item, index) in tableColumn"><!-- 此列需要自定义 --><el-table-columnv-if="item.isSlot":key="'%' + index":show-overflow-tooltip="showOverflowTooltip"v-bind="item":render-header="item.renderHeader"v-on="events"><template slot-scope="{ row, $index }"><ex-slotv-if="item.render":render="item.render":row="row":index="$index":column="item":class="item.prop":default-value="item.defaultValue"/><slot v-else :name="item.prop" :row="row" /></template></el-table-column><!-- 正常列 --><el-table-columnv-else:key="'%' + index":show-overflow-tooltip="showOverflowTooltip"v-bind="item"v-on="events"/></template><el-table-column v-if="hasOperation" fixed="right" label="操作" :min-width="operationWidth"><!-- <template v-if="!btnButton || btnButton.length === 0" slot-scope="scope"><slot name="operation" :row="scope.row" :index="scope.$index" /></template> --><template v-if="btnButton.length" slot-scope="{ row, column, $index }"><el-buttonv-for="(value, i) in btnButton":key="'$' + i"size="small":type="value.type":icon="value.icon":class="value.class"@click="value.callback(row, column, $index)">{{ value.text }}</el-button></template></el-table-column></el-table><!-- 分页 --><divv-if="isNeedPagination"style="display: flex; justify-content: flex-end; align-item: centerl; padding-top: 15px"><el-paginationref="pagination":page-sizes="pageSizes":page-size.sync="computedPageSize":hide-on-single-page="isSinglePageHide"layout="total, sizes, prev, pager, next, jumper":current-page.sync="computedCurrentPage":total="total":pager-count="pagerCount"@current-change="currentChange"@size-change="sizeChange"/></div></div>
</template>
<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.defaultValueparams.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: {// keyrowKey: {type: String,default: ''},// 超出行是否隐藏不换行showOverflowTooltip: {type: Boolean,default: true},// 是否需要多选needSelect: {type: Boolean,default: false},// 是否需要序号hasIndex: {type: Boolean,default: false},// 是否需要分页isNeedPagination: {type: Boolean,default: true},// 是否单页隐藏，默认为trueisSinglePageHide: {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: () => {}},// 获取数据时是否需要加载loadingloading: {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.$elvm.querySelectorAll('.el-table__body tr')[index].scrollIntoView()//让定位到的这条数据产生高亮效果tableRefs.setCurrentRow(tableData[index])
}