需求：
通过input输入框，输入要查找的数据字段，点击确定可以定位到查找的那行数据、并把改行显示高亮。
实现思路：
安装 umy-ui 和 babel插件：（el-table可直接忽略不安装）
npm install umy-ui
npm install babel-plugin-component -Dmain.js中引入：
import 'umy-ui/lib/theme-chalk/index.css'
import { UTableColumn, UTable, UxGrid, UxTableColumn } from 'umy-ui' // 按需引入组件
Vue.use(UTableColumn)
Vue.use(UTable)
Vue.use(UxGrid)
Vue.use(UxTableColumn)babel.config.js中添加：
'plugins': [
[
'component',
{
'libraryName': 'umy-ui',
'styleLibraryName': 'theme-chalk'
}
]
]vue代码实现：
首先：
u-table中必须添加的属性：
1.use-virtual 使用虚拟表格
2.:row-height="30" 设置每个table行的行高（这里一定要与后面寻找行所乘的倍数一一对应）
3.:height="600" 设置u-table表格高度
4.ref="stuList"
以上1、2、3 同时调价表示使用虚拟列。
然后：
思路：存放table表格的数据是stuList集合，查找某一个学号的位置，实际上是查找该条数据在stuList的index索引是多少，也就是该条数据在stuList集合中是第几条数据。然后通过scrollTop向上滑动指定高度，也就是先了数据定位功能。
其次：（看代码）
this.$refs.stuList.$refs.singleTable.$refs.bodyWrapper.scrollTop = this.input * 30
这句标红的代码，需要你查看自己项目中具体是什么样的：
查找思路：
通过u-table绑定的@row-click="selectRow"事件：
在selectRow方法中打出this
页面上表格数据随便点击某一行，控制台直接打出
找到table表格中 ref="stuList"绑定的bodyWrapper，然后找到下面的scrollTop
然后拼接出来 等于 查找元素index × 表格绑定的row-height 就可以定位到数据的位置。
最后：
给改行加上高亮样式：
u-table 属性: row-style="selectedHighlight"
较完整参考代码：文章来源：https://www.toymoban.com/news/detail-659448.html
<template>
<div class="app-container">
<el-row :gutter="18">
<el-dialog
title="test"
visible="true"
width="30%"
center
>
<el-row>
<el-col :span="12">
<el-input v-model="input" style="width:250px" placeholder="请输入内容" />
</el-col>
<el-col :span="4">
<el-button @click="selectRowwwwww">定位</el-button>
</el-col>
<el-col :span="4">
<el-button>下一个</el-button>
</el-col>
<el-col :span="4">
<el-button>上一个</el-button>
</el-col>
</el-row>
<u-table
ref="stuList"
v-loading="loading"
:data="stuList"
use-virtual
:row-style="selectedHighlight"
:row-height="30"
:height="600"
@row-click="selectRow"
>
<u-table-column type="selection" width="45" align="center" fixed="left" />
<u-table-column label="序号" width="480px" align="center" fixed="left">
<template slot-scope="scope">
<span>{{ scope.row.idserial }}</span>
</template>
</u-table-column>
</u-table>
</el-dialog>
</el-row>
</div>
</template>
<script>
import {getStuTest} from '@/api'
export default {
name: 'Student',
data() {
return {
attr: [],
input: 0,
stuList: []
},
mounted() {
this.getStuTest()
},
methods: {
// *******************************************************
selectRowwwwww() {
this.attr = []
for (var i = 0; i < this.stuList.length; i++) {
if (this.stuList[i].idserial === this.input) {
this.attr.push(i)
}
}
this.$refs.stuList.$refs.singleTable.$refs.bodyWrapper.scrollTop = this.input * 30
},
// *******************************************************
// *******************************************************
selectedHighlight({ row, rowIndex }) {
if (this.attr.length > 0 && rowIndex === this.attr[0]) {
console.log('************添加高亮样式***************')
this.$refs.stuList.$refs.singleTable.setCurrentRow(row)
return { 'background-color': '#67c23a', 'color': '#fff' }
}
},
// *******************************************************
// *******************************************************
selectRow(row, col, event) {
console.log('+++++>', this)
},
// *******************************************************
getStuTest() {
getStuTest().then(response => {
this.stuList = response.data
})
}
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.el-dialog__body {
padding: 0px 20px!important;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-659448.html
到了这里，关于umy-ui —— table检索字段自动滚到指定位置并高亮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
