vue 表格组件 vxe-table 树表格连接线的使用

树表格的层级关系如果只靠缩进表达，层级较深时不易辨认。vxe-table 通过 treeConfig.showLine 开启树节点连接线，用线条直观展示父子层级；还可通过 showRootLine 控制根节点是否显示连接线，并通过 lineColor、lineType 自定义线条颜色与样式。连接线支持虚拟滚动，大数据量下依然可用。

vxe-table 如何开启树表格连接线？

在 treeConfig 中设置 showLine: true 即可开启连接线；再设置 showRootLine: true 让根节点也显示连接线。线条颜色与类型分别通过 lineColor、lineType 配置。

生效前提：
- 表格必须启用树形结构，即配置 treeConfig，且树节点列设置 treeNode: true。
- showLine 是连接线总开关，未开启时 showRootLine、lineColor、lineType 均不生效。
- 数据需形成正确的父子关系：treeConfig.transform: true 时，数据以平铺数组提供，通过 rowField（主键）与 parentField（父级字段）建立层级。
  预期结果：树节点左侧出现竖向与横向连接线，清晰标示层级归属；根节点是否显示连接线由 showRootLine 决定。

连接线相关配置参数

配置项	类型	默认值	说明
treeConfig.showLine	Boolean	false	是否显示树节点连接线，总开关
treeConfig.showRootLine	Boolean	false	是否显示根节点的连接线
treeConfig.lineColor	String	主题默认	连接线颜色，支持任意 CSS 颜色值
treeConfig.lineType	String	'solid'	连接线类型，如实线、虚线，可选值以官方文档为准
treeConfig.transform	Boolean	false	是否将平铺数据转换为树形结构
treeConfig.rowField	String	—	行主键字段，transform 模式下用于建立父子关系
treeConfig.parentField	String	—	父级字段，值为 null 时视为根节点
列 treeNode	Boolean	false	指定该列为树节点列，展开图标与连接线在此列渲染

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  showOverflow: true,
  border: 'outer',
  rowConfig: {
    useKey: true
  },
  columnConfig: {
    resizable: true
  },
  treeConfig: {
    transform: true,
    showLine: true,
    showRootLine: true
  },
  columns: [
    { field: 'name', title: 'Name', treeNode: true },
    { field: 'size', title: 'Size' },
    { field: 'type', title: 'Type' },
    { field: 'date', title: 'Date' }
  ],
  data: [
    { id: 1e4, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
    { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
    { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
    { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },
    { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
    { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
    { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
    { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
    { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
  ]
})
</script>

树节点左侧显示竖向与横向连接线，根节点也包含在内；展开、收起时连接线随之调整。

复选框与连接线

树节点列使用复选框列时，展开图标与连接线渲染在复选框列内：

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  showOverflow: true,
  border: 'outer',
  stripe: true,
  rowConfig: {
    useKey: true
  },
  columnConfig: {
    resizable: true
  },
  checkboxConfig: {
    labelField: 'name'
  },
  treeConfig: {
    transform: true,
    showLine: true
  },
  columns: [
    { type: 'checkbox', treeNode: true },
    { field: 'size', title: 'Size' },
    { field: 'type', title: 'Type' },
    { field: 'date', title: 'Date' }
  ],
  data: [
    { id: 1e4, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
    { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
    { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
    { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },
    { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
    { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
    { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
    { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
    { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
    { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
  ]
})
</script>

关键配置解析

1. 连接线总开关

treeConfig: {
  showLine: true
}

这是所有连接线相关配置的前提。未开启时，即使设置了 showRootLine、lineColor、lineType，也不会渲染连接线。

2. 根节点连接线

treeConfig: {
  showLine: true,
  showRootLine: true
}

showRootLine: true：根节点左侧也绘制连接线，视觉上更完整。
showRootLine: false（默认）：根节点不显示连接线，线条从二级节点开始。示例 2 即此配置。

3. 自定义线条颜色与类型

treeConfig: {
  showLine: true,
  lineColor: '#909399',
  lineType: 'dashed'
}

lineColor：支持十六进制、RGB 等 CSS 颜色值。
lineType：线条类型，如 'solid'、'dashed'，具体可选值以官方文档为准。

4. 树节点列的选择

// 普通字段列作为树节点列
{ field: 'name', title: 'Name', treeNode: true }

// 复选框列作为树节点列
{ type: 'checkbox', treeNode: true }

treeNode: true 标记该列为树节点列，展开图标、缩进、连接线都在此列渲染。
一个表格只应有一列设置 treeNode: true。
复选框列作为树节点列时，连接线与展开图标会渲染在复选框左侧，需确认列宽足够。

5. rowConfig.useKey 的作用

rowConfig: {
  useKey: true
}

开启后，表格会为每一行保留唯一键，用于优化渲染性能与状态保持（如展开状态、选中状态）。
与 treeConfig.rowField 指定主键配合使用，树形结构下建议开启。

6. 虚拟滚动下的连接线

连接线支持虚拟滚动。但虚拟滚动只渲染可视区域行，连接线也只在可见范围内绘制，快速滚动时可能出现短暂重绘，属正常现象。

https://vxetable.cn

posted @ 2026-11-13 17:21 你个老六阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

zhiy3