基于nz-table二次封装ng-alian的表格组件st;实现行内数据变化

50 阅读1分钟

由于st组件是二次封装,所以,定制性化较高,使用就不怎么灵活

  • 实现行内元素变化的话,就得想办法操作行内数据。st有一个api,就是setRow可以设置行数据变化,并反应到视图中去。
@ViewChild('st', { static: false }) st!: STComponent;
{
    title: '操作区',
    buttons: [
        {
            text: i => (i.ok ? 'Click' : 'Edit'),
            icon: i => ({ type: i.ok ? 'edit' : 'delete' }),
            className: i => (i.ok ? 'text-error' : null),
            click: (i, modal, instance) => {
                const oldItem = instance?._data.find(j => j?.['ok'] === true);
                // 如果找到了,将其 `ok` 置为 `false`
                if (oldItem) {
                    this.st.setRow(oldItem, { ok: false });
                }
                // 然后将当前点击的表项的 `ok` 置为 `true`
                this.st.setRow(i, { ok: true });
            }
        }
    ]
}