C7N 操作当前 table cell

场景:

在 C7N table 组件中,实现 cell 中的内容,双击展开或收起

思路:

通过 onCell 方法实现

方案:

const onCell = () => {
  return {
    style: {
      overflow: 'hidden',
      maxWidth: 180,
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    },
    onDoubleClick: (e) => {
      const { target } = e;
      if (target.style.whiteSpace === 'normal') {
        target.style.whiteSpace = 'nowrap';
      } else {
        target.style.whiteSpace = 'normal';
        target.style.height = 'auto';
        target.style.lineHeight = 'initial';
      }
    },
  };
};

const journalColumns: ColumnProps[] = React.useMemo(
  () =>
    [
      {
        name: 'errorMsg',
        onCell: () => onCell(),
      },
    ],
  []
);

.

posted @ 2022-07-16 23:15  每天都要进步一点点  阅读(92)  评论(0)    收藏  举报