轮播表格-如何实现行样式自定义配置

使用场景

在轮播表格中,需要对行文字数据等进行一些自定义的设置操作(如:指定区间范围数据高亮等等),此时可以通过添加数据过滤器的方式,来解决这一问题。

操作步骤

添加过滤器

在数据编辑中,打开数据过滤器,创建新的过滤器

过滤器创建

勾选「使用过滤器」选项,下方「加号」按钮 进行过滤器添加;

  • 名称做过滤器的管理,必填项;
  • 回调字段,即当组件需要接收回调参数时,可在此处进行填写接收(详细使用场景 可见数据交互模块);
  • 编辑器,即用户可在此处编写原生的JS脚本,主要为js函数的使用(需使用者具备一定前端js技术能力);
  • 下方预览即可对执行的语句结果进行预览查看;

如此处添加一个名为「高亮」的过滤器,根据编写的代码,此过滤器即对组件中完成率大于70的数据高亮展示;(可根据自身需要修改代码条件等)

JavaScript语法参照:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

参考:

return data. map(d=>{
  return {
    ...d,
    highlight:d.column2>70?"true":"false"
  }
});

并在行配置中对匹配值的【字段名】和【字段值】对应修改,即可实现匹配值的高亮。

说明:

匹配值中的【字段名】和【字段值】的内容与数据中的【字段名】和【字段值】相对应时,通过修改文本样式即可实现对应行的高亮显示。

  1. 一般情况下可以根据数据中对应的字段名和字段值,实现某行的高亮;

参考:

根据数据修改对应匹配值的字段名为“column1”和字段值“北京”。

  1. 若要更加灵活的使用,实现指定范围区间的多行高亮则需要添加数据过滤器来实现,其中匹配值的字段名即数据过滤器中定义的字段名,字段值即为数据过滤自中的字段值。

案例下载

📎轮播表格自定义.screen.zip


如遇其他使用问题,可扫描下方二维码,获取更多产品支持~

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群