需求：

?通過input輸入框，輸入要查找的數(shù)據(jù)字段，點擊確定可以定位到查找的那行數(shù)據(jù)、并把改行顯示高亮。

?

實現(xiàn)思路：

安裝 umy-ui 和 babel插件：（el-table可直接忽略不安裝）

npm install umy-ui
npm install babel-plugin-component -D

main.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代碼實現(xiàn)：

?

?首先：

u-table中必須添加的屬性：

1.use-virtual? 使用虛擬表格

2.:row-height="30"? ? 設(shè)置每個table行的行高（這里一定要與后面尋找行所乘的倍數(shù)一一對應(yīng)）

3.:height="600"? ? 設(shè)置u-table表格高度

4.ref="stuList"? ?

以上1、2、3 同時調(diào)價表示使用虛擬列。

然后：

?思路：存放table表格的數(shù)據(jù)是stuList集合，查找某一個學(xué)號的位置，實際上是查找該條數(shù)據(jù)在stuList的index索引是多少，也就是該條數(shù)據(jù)在stuList集合中是第幾條數(shù)據(jù)。然后通過scrollTop向上滑動指定高度，也就是先了數(shù)據(jù)定位功能。

?其次：（看代碼）

?this.$refs.stuList.$refs.singleTable.$refs.bodyWrapper.scrollTop = this.input * 30

?這句標(biāo)紅的代碼，需要你查看自己項目中具體是什么樣的：

查找思路：

通過u-table綁定的@row-click="selectRow"事件：

在selectRow方法中打出this

?頁面上表格數(shù)據(jù)隨便點擊某一行，控制臺直接打出

?找到table表格中 ref="stuList"綁定的bodyWrapper，然后找到下面的scrollTop

然后拼接出來 等于 查找元素index × 表格綁定的row-height 就可以定位到數(shù)據(jù)的位置。

最后：

給改行加上高亮樣式：

u-table 屬性: row-style="selectedHighlight"

較完整參考代碼：

<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="請輸入內(nèi)容" />
          </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>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-659448.html

到了這里，關(guān)于umy-ui —— table檢索字段自動滾到指定位置并高亮的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！