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

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

树形表格的基本配置

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

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

基本配置示例如下：

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 : ''
    }
  }
]

注意事项

1. 属性命名：必须使用treeNode而不是tree-node或'tree-node'
2. 数据格式：确保数据中包含正确的children结构
3. 性能考虑：当数据量较大时，避免使用expandAll: true
4. 样式调整：可以通过indent属性调整树形缩进的大小

通过以上配置，开发者可以灵活地在UMY-UI的UX-Grid中使用JSX语法自定义树形列，实现复杂的树形表格展示需求。