快捷導(dǎo)航

vue table直接定位到指定元素的操作代碼

更新時(shí)間：2022年11月24日 11:41:06 作者：_houjie

最近遇到這樣的需求點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)?lái)了vue table直接定位到指定元素的操作代碼,需要的朋友可以參考下

vue+element中的表格，直接定位到指定的元素。

需求：點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)。

  <el-table ref="highTable" :data="treeData" highlight-current-row border default-expand-all row-key="'id" :tree-props="{children:'children',hasChildren:'hasChildren'}" :row-style="rowClassRender" :row-class-name="tableRowClassName">
            ...
        </el-table>

treeData是我的樹(shù)狀數(shù)據(jù)，表格樹(shù)。

default-expand-all：是否默認(rèn)展開(kāi)所有行，當(dāng) Table 包含展開(kāi)行存在或者為樹(shù)形表格時(shí)有效；

row-style：行的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有行設(shè)置一樣的 Style； //高亮顯示

row-class-name：行的 className 的回調(diào)方法，也可以使用字符串為所有行設(shè)置一個(gè)固定的 className。 //獲取index（我用的是樹(shù)狀數(shù)據(jù)，如果是列表數(shù)據(jù)就不需要）

rowClassRender({
                row
            }) {
                if (row.id === this.currentItemId) {
                    return {
                        'background-color': 'red'
                    }
                } else {
                    return ''
                }
            },
            tableRowClassName({
                row,
                index
            }) {
                //this.nodeItem是我最開(kāi)始點(diǎn)擊的節(jié)點(diǎn)
                if (row.id === this.nodeItem.id) {
                    this.currentIndex = index;
                }
            }

注意：一定要在獲取數(shù)據(jù)之后去賦值?。?！不然scrollTop一直為0?。。。。?/p>

在獲取列表的代碼塊中：

let divT = this.$refs.hightTable;
                this.$nextTick(()=>{
                    divT.scrollTop = 36 * this.currentIndex
                 })

vue中table表格做定位處理

需求：前端根據(jù)搜索條件中的partNo的值，進(jìn)行定位查詢到table列表中對(duì)應(yīng)的每一行

search(){
  if(this.positionIndx.length==0){
    this.tableData.forEach((item,index)=>{
      if(item.partNo == this.queryForm.partNo){
        this.positionIndx.push(index)                        // 定義一個(gè)空數(shù)組 positionIndx 用來(lái)保存相同partNo的下標(biāo)；
      }
    })
  }
  if (this.tableData.length > 0) {
    if (this.queryForm.partNo !== '') {
      if (this.$refs['selectPartRefs']) {
        let vmEl = this.$refs['selectPartRefs'].$el            // selectPartRefs 是table中綁定的ref的值，一定要保持一致；
        //計(jì)算滾動(dòng)條的位置
        const targetTop = vmEl.querySelectorAll('.el-table__body tr')[this.positionIndx[this.inPosition]].getBoundingClientRect().top    // 找到table中的每一行利用下標(biāo)來(lái)計(jì)算每一行dom元素的上部與瀏覽器的可視窗口的上面的高度距離；
        const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
        const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
        scrollParent.scrollTop = targetTop - containerTop;
        this.inPosition++;                                     // 首先在data中定義 inPosition = 0 ，每次點(diǎn)擊search按鈕的時(shí)候，讓下標(biāo)進(jìn)行++操作，以遍定位到下一個(gè)匹配的partNO；
        if( this.inPosition >= this.positionIndx.length ){
          this.inPosition = 0;                                 // 所有的都遍歷完成以后，讓定位回到第一個(gè)匹配的partNo的行上，以此達(dá)到可以循環(huán)定位的效果；
        }
      }
    } else {
      this.$message({
        type: 'error',
        message:'Please enter the partNo of the query'
      })
    }
  }
},