在使用element-ui搭建的表格中,實現點擊"定位"按鈕后,屏幕滾動到對應行的位置

背景:

　　一個后台管理系統,當管理員登錄之后,會存在一個自己的id值,

　　在一個表格中,當點擊"定位"按鈕后,屏幕滾動到擁有管理員id的這一行,並且給設置一個高亮的背景

 

相關知識點:

　　查找數組中是否存在某個字段

　　獲取父節點

　　獲取全部子節點

　　動態添加id

　　屏幕滾動到指定位置

　　......

 

1.定義事件

<el-button size="mini" type="info"  @click="ClickTableLocation">定位</el-button>

//定位按鈕
      ClickTableLocation(){

}

2.在表格上定義ref,通過ref拿到表格的對象信息

ClickTableLocation(){

        //使用refs獲取到整個表格對象
        let refTab = this.$refs.TableId
        console.log("使用refs獲取到的整個表格為:")


        //拿到表格的data數據
        let refTabInsideData = refTab.data

}

3.在表格的數組里面定義一條數據,代表着這個當前登錄的管理員的身份id

4.循環遍歷這個數組,找到擁有這個字段的對象下標

//定位按鈕
      ClickTableLocation(){

        //使用refs獲取到整個表格對象
        let refTab = this.$refs.TableId
        console.log("使用refs獲取到的整個表格為:")


        //拿到表格的data數據
        let refTabInsideData = refTab.data


        //遍歷這個數組
        for(let i = 0; i < refTabInsideData.length; i++){
          //判斷對象中是否存在"userNameId"這個屬性
          if(refTabInsideData[i].hasOwnProperty('userNameId')){
            //獲取到存在 "userNameId"這個屬性的對象下標
            let tableIdLocation = refTabInsideData.map(item => item.userNameId).indexOf(666)

}

5.給表格定義一個id,並通過這個id獲取到表格的某行,跟上面擁有 "userNsmeId"這個字段的數據對應

 

 "定位"按鈕的點擊事件全部代碼為:

//定位按鈕
      ClickTableLocation(){

        //使用refs獲取到整個表格對象
        let refTab = this.$refs.TableId
        console.log("使用refs獲取到的整個表格為:")


        //拿到表格的data數據
        let refTabInsideData = refTab.data


        //遍歷這個數組
        for(let i = 0; i < refTabInsideData.length; i++){
          //判斷對象中是否存在"userNameId"這個屬性
          if(refTabInsideData[i].hasOwnProperty('userNameId')){
            //獲取到存在 "userNameId"這個屬性的對象下標
            let tableIdLocation = refTabInsideData.map(item => item.userNameId).indexOf(666)

            //獲取到表格的節點,獲取到表格的所有子節點
            let myTableId = document.getElementById("myTableId").childNodes

            //拿到第3個表格內容結構的所有子節點  class = "el-table__body-wrapper is-scrolling-none"
            let myTableIdChildNo3 =  myTableId[2].childNodes

            //在拿到所有子節點中的第一個
            let myTableIdChildNo3ChildNo1 = myTableIdChildNo3[0].childNodes


            //再拿到結構為<tboby></tboby>的節點
            let tbobyChildNo2 = myTableIdChildNo3ChildNo1[1]

            //獲取到結構為<tboby></tboby>的子節點
            let kk = tbobyChildNo2.childNodes

            //把遍歷處出來有 "userNameId:666" 這個字段的下標賦值給當前表格行
            let kkll = kk[tableIdLocation]


            //給這行表格動態的添加一個id,實現背景顏色的突出顯示
            kkll.setAttribute('id','table_td_bg')

            //當點擊"定位"按鈕之后,實現屏幕滾動到這個id的位置,並且在屏幕的中間
            let element = document.getElementById("table_td_bg");
            element.scrollIntoView({block:"center"})

          }
        }
      },

 

這里獲取節點的操作寫的比較繁瑣,應該有更好的方式,等后面了解了再來修改,期待看到的大神能指導一下....