vxe-table 可以使用 $parent
或 $root
属性来访问父组件,从而找到当前节点的顶级父节点。不过需要注意的是,在 vxe-table 中,并不像 el-tree
那样支持通过 getNode
方法获取当前节点。
假设你已经在表格中设置好了 tree-config
属性、expand-row-keys
属性和 columns
列配置对象。具体代码如下:
// 获取当前节点
const currentNode = this.$refs.table.getRowNode(row);
// 获取顶级父节点
let parentNode = currentNode;
while (parentNode.level > 1) {
const parentRow = this.$refs.table.getRow(parentNode.parent);
parentNode = this.$refs.table.getRowNode(parentRow);
}
// 输出顶级父节点
console.log(parentNode.item.label);
首先使用 getRowNode
方法将 row
参数转换为对应的节点对象,然后通过循环遍历 parentNode
的 level
属性,直到顶级父节点为止。这里使用了 while
循环来进行多次遍历,每一次都将 parentNode
属性指向当前节点的父节点(即使用 parent
属性获取对应的行对象,然后使用 getRowNode
方法将其转换为节点对象),直到找到level
属性为 1,即表格树形数据的根节点。
最后输出顶级父节点的 label 属性,需要注意的是,如果当前节点本身就是根节点,那么顶级父节点就是它自己。