vue table直接定位到指定元素

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

需求:点击某一个节点,弹窗,直接定位到点击的节点,高亮并显示数据。

        <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是我的树状数据,表格树。

default-expand-all:是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效;

row-style:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style; //高亮显示

row-class-name:行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 //获取index(我用的是树状数据,如果是列表数据就不需要)

rowClassRender({
                row
            }) {
                if (row.id === this.currentItemId) {
                    return {
                        'background-color': 'red'
                    }
                } else {
                    return ''
                }
            },
            tableRowClassName({
                row,
                index
            }) {
                //this.nodeItem是我最开始点击的节点
                if (row.id === this.nodeItem.id) {
                    this.currentIndex = index;
                }
            }

注意:一定要在获取数据之后去赋值!!!不然scrollTop一直为0!!!!!

在获取列表的代码块中:

 let divT = this.$refs.hightTable;
                this.$nextTick(()=>{
                    divT.scrollTop = 36 * this.currentIndex
                 })
posted @ 2022-11-24 11:09  _houjie  阅读(645)  评论(0编辑  收藏  举报