关于ng-alain的st、sf一些小功能的总结

1、ng-alain其中的 st 表格,有STColumnButtonDrawer(抽屉)和STColumnButtonModal(模态框)传值问题:
如列表内容太多,列表一行无法显示,点击一个按钮,出来一个抽屉,抽屉里面是这一行的全部内容,

 columns: STColumn[] = [
 {
      title: '操作',//表头名字
      index: 'operate ',
      buttons: [
      {
        text: '查看全部',//按钮名字
        type: 'drawer',
        drawer: {
          title: '编辑',
          component: DrawerComponent,
        },
      }]
    },
]

在DrawerComponent的ts文件里面,只需要定义一个

reword:any;

这个reword就是对应这一行的全部数据

2、若要在前端的 st 表格直接实现排序功能,一句即可:
compare: (a, b) => (a.createTime < b.createTime ? -1 : a.createTime > b.createTime ? 1 : 0),

 { title: '时间', index: 'time', type: 'date',
    sort: {
      compare: (a, b) => (a.time < b.time? -1 : a.time > b.time ? 1 : 0),
    },
   },

3、关于这个时间,在 sf 表单里面,有时候需要限制时间,如不能选择今天以前,或者今天以后的时间,也很简单的一句话:
showTime: false,
disabledDate: (current: Date) => {
return differenceInCalendarDays(current, this.time) > 0;
},
showTime: 是不显示哪些时间,若是不加,做限制的时间不能选择,但是可以显示
大于(>)0是今天以后的时间
小于(>)0是今天以前的时间

format可以限制时间的格式

import { differenceInCalendarDays } from 'date-fns';

time = new Date(); // 当前时间

Stime: {
        type: 'string',
        title: '时间',
        ui: {
          widget: 'date',
          format: 'YYYY-MM-DD',
          showTime: false,
          disabledDate: (current: Date) => {
            return differenceInCalendarDays(current, this.time) > 0;
          },
        }
      },

4、关于st表格的badge 徽标用法:

 BADGE: STColumnBadge = {
    0: { text: '未读', color: 'error' },
    1: { text: '已读', color: 'success' },
  };
  columns: STColumn[] = [
    { title: '状态', index: 'Mstate', type: 'badge', badge: this.BADGE, },
  ]
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值