如何自定义表格单元格样式

介绍

OinOne的表格是基于Vxe-Table实现的,我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget

Vxe-Table相关文档

单元格样式

行的样式、单元格样式,表头的样式、表尾的样式、全部都可以完全自定义,通过设置 cellClassName、headerCellClassName、rowClassName ...等参数

(注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式)

单元格动态样式

行的动态样式、单元格动态样式,表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle ...等参数

(注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式)

示例代码

这里仅演示cellClassNamecellStyle,其他方法的出入参数请参考上面的Vxe-Table文档

import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies';

@SPI.ClassFactory(BaseElementWidget.Token({
  viewType: ViewType.Table,
  widget: 'CustomStyleTableWidget',
}))
export class CustomStyleTableWidget extends TableWidget {

  @Widget.Method()
  protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
    if (column.field === 'field00019') {
      return `demo-cell-${column.field}`;
    }
    return '';
  }

  @Widget.Method()
  protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
    if (column.field === 'field00019') {
      return {
        backgroundColor: '#f60',
        color: '#ffffff'
      };
    }
    return '';
  }
}

效果预览

如何自定义表格单元格样式

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/18749.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2024年10月29日 下午3:49
下一篇 2024年10月30日 上午11:53

相关推荐

  • 自定义mutation时出现校验不过时,如何排查

    场景描述 用户在自定义接口提供给前端调用时 @Action(displayName = "注册", bindingType = ViewTypeEnum.CUSTOM) public BaseResponse register(UserZhgl data) { //…逻辑 return result; } import java.io…

    2023年11月1日
    28700
  • 表格字段配置Switch开关

    在业务开发中,我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢,下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction,代表的是该字…

    2023年11月21日
    38300
  • 如何关闭table的checkbox?

    需要修改xml的配置 将xml中的fields改成table,并将配置加上 // 原来的写法 <template slot=”fields” > … </template> // 配置后的写法 <template slot=”table” checkbox=”false”> … </template>

    2023年11月1日
    15000
  • OioMessage 全局提示

    全局展示操作反馈信息。 何时使用 可提供成功、警告和错误等反馈信息。 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。 API 组件提供了一些静态方法,使用方式和参数如下: OioMessage.success(title, options) OioMessage.error(title, options) OioMessage.info(ti…

    2023年12月18日
    35300
  • 提交数据动作如何把弹窗内的数据完全返回

    场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单,表单内有一个o2m字段,展示了除关联关系字段(大部分场景为id)外的其他字段 弹窗底部动作区域有一个提交数据的客户端动作,该动作会将弹窗内表单的数据回写到表格行的数据上 场景截图 问题现象 点击提交数据的客户端动作,会将数据回写到表格行的数据上,但是表格行拿到的o2m字段的数据只有id字…

    2024年6月28日
    35600

发表回复

登录后才能评论