跳到主要内容

数据表格自定义列使用指引

场景描述​

在低代码开发中，数据表格组件的默认列展示可能无法满足复杂的业务需求。通过自定义列功能，您可以在表格列中嵌入各种组件，实现更丰富的数据展示和交互效果，如：

  • 状态标签显示
  • 操作按钮组合
  • 图片预览
  • 进度条展示
  • 自定义格式化内容

基础实现步骤​

1. 配置自定义列​

在数据表格组件的表格列-列管理中，将需要自定义展示的字段的展示内容设置为「自定义内容」。

2. 添加自定义组件​

在数据表格的自定义列区域中，拖入需要展示的组件。支持的组件类型包括：

  • 文本组件
  • 按钮组件
  • 图片组件
  • 标签组件
  • 进度条组件
  • 其他 UI 组件

3. 配置组件内容​

以文本组件为例，将组件拖入自定义列区域：

4. 绑定数据字段​

为组件绑定对应的数据字段值，实现动态内容展示：

数据绑定语法​

基础语法​

$w.table1.cell_duoxingwenben.record.duoxingwenben; // 获取当前行指定字段的数据

语法说明​

  • $w.table1：表格组件实例
  • cell_duoxingwenben：自定义列的标识符
  • record：当前行的数据对象
  • duoxingwenben：具体的字段名

常用数据绑定示例​

// 获取当前行的ID
$w.table1.cell_custom.record.id;

// 获取当前行的状态字段
$w.table1.cell_custom.record.status;

// 获取当前行的用户名
$w.table1.cell_custom.record.username;

// 获取当前行的创建时间
$w.table1.cell_custom.record.createTime;

高级应用场景​

场景 1：状态标签显示​

使用标签组件根据数据状态显示不同颜色的标签：

// 标签文本绑定
$w.table1.cell_status.record.status;

// 标签颜色绑定（条件表达式）
$w.table1.cell_status.record.status === "已完成"
  ? "success"
  : $w.table1.cell_status.record.status === "进行中"
  ? "warning"
  : "error";

场景 2：操作按钮组​

在自定义列中添加多个按钮，实现行级操作：

// 编辑按钮点击事件
({ event }) => {
  const rowData = $w.table1.cell_actions.record;
  // 执行编辑逻辑
  console.log("编辑数据：", rowData);
};

// 删除按钮点击事件
({ event }) => {
  const rowData = $w.table1.cell_actions.record;
  // 执行删除逻辑
  console.log("删除数据：", rowData);
};

场景 3：进度条显示​

使用进度条组件显示完成度：

// 进度值绑定
$w.table1.cell_progress.record.progress;

// 进度条颜色绑定
$w.table1.cell_progress.record.progress >= 80
  ? "success"
  : $w.table1.cell_progress.record.progress >= 50
  ? "warning"
  : "error";
  • 避免在自定义列中使用过于复杂的组件
  • 合理控制自定义列的数量
  • 对于大数据量表格，考虑使用虚拟滚动

常见问题​

Q: 自定义列中的组件事件如何获取当前行数据？​

A: 使用 $w.table1.cell_xxx.record 语法获取当前行的完整数据对象。

Q: 如何在自定义列中实现条件显示？​

A: 可以通过条件表达式控制组件的显示状态：

// 组件显示条件
$w.table1.cell_custom.record.status === "已发布";

Q: 自定义列的宽度如何调整？​

A: 在表格列管理中设置对应列的宽度属性，或使用 CSS 样式进行精细控制。