在UMY-UI的UX-Grid中使用JSX自定义树形列的正确方式

原创于 2025-06-26 09:08:09 发布 · 259 阅读

CC 4.0 BY-SA版权

在UMY-UI的UX-Grid中使用JSX自定义树形列的正确方式

umy-ui umy-ui，一套为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题项目地址: https://gitcode.com/gh_mirrors/umy/umy-ui

UMY-UI是一个基于Vue.js的UI组件库，其中的UX-Grid组件提供了强大的表格功能，包括树形表格展示。本文将详细介绍如何在UX-Grid中正确使用JSX语法自定义树形列。

树形表格的基本配置

在UX-Grid中实现树形表格需要两个关键配置：

tree-config：定义树形结构的相关参数
列定义：指定哪些列作为树节点显示

基本配置示例如下：

tree-config: {
  children: 'children',  // 子节点字段名
  hasChild: 'hasChildren',  // 是否有子节点的标识字段
  expandAll: true,  // 是否默认展开所有节点
  indent: 20  // 缩进宽度
}

JSX方式定义树形列的常见误区

许多开发者在使用JSX语法定义列时会遇到树形结构不显示的问题，主要原因在于列属性的写法不正确。

错误写法

{
  field: 'name',
  title: '物料名称',
  'tree-node': true,  // 这种写法无效
  slots: {
    default: ({ row }) => row.materialFields ? row.materialFields.name : ''
  }
}

正确写法

{
  field: 'name',
  title: '物料名称',
  treeNode: true,  // 必须使用驼峰命名
  slots: {
    default: ({ row }) => row.materialFields ? row.materialFields.name : ''
  }
}

完整示例

以下是一个完整的UX-Grid树形表格配置示例：

<ux-grid
  ref="plxTable"
  v-loading="loading"
  :data="formTable.tableData"
  :columns="allUxTableColumn"
  :tree-config="{
    children: 'children',
    hasChild: 'hasChildren',
    expandAll: true,
    indent: 20
  }"
  :expand-config="{ labelField: 'uuid', expandAll: true }"
  border
  :height="uTableHeight"
  row-id="uuid"
>
  <!-- 其他配置 -->
</ux-grid>

对应的列定义：

const allUxTableColumn = [
  {
    field: 'name',
    title: '物料名称',
    minWidth: 100,
    treeNode: true,  // 关键配置
    resizable: true,
    slots: {
      default: ({ row }) => row.materialFields ? row.materialFields.name : ''
    }
  },
  {
    field: 'unit',
    resizable: true,
    title: '单位',
    minWidth: 100,
    slots: {
      default: ({ row }) => row.materialFields ? row.materialFields.comp : ''
    }
  }
]