时间戳

首页 > 解决方案 > 将样式应用于 antd 表格列

javascript - 将样式应用于 antd 表格列

问题描述

我有下表列配置，我在其中使用自定义功能呈现注释

fieldDefs: (results, isJsonData) => [
{
  title: 'Notes',
  name: 'notesHTML',
  table: {
    render: SectionNotes,
    searchable: true,
    width: 200, 
    style: { maxHeight: 300, overflowY: 'auto'} // tried with this but not working this way
  }
}]

下面是 SectionNotes 方法

const SectionNotes = notes => {
  if (!notes) return '';
  /* eslint-disable react/no-danger */
  return notes.map((note, index) => (
    <div key={note} style={{ maxHeight: 300, overflowY: 'auto'}}>
      <span style={{ fontWeight: 'bold' }}>
        {index + 1}.{' '}
      </span>
      <span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
    </div>
  ));
  /* eslint-enable react/no-danger */
};

在这里，我正在做的是循环浏览笔记并将样式style={{ maxHeight: 300, overflowY: 'auto'}}应用于每个笔记，如果它具有最小宽度，则应用滚动条。

如下图所示 在此处输入图像描述

但我想对整个单元格数据应用相同的样式，而不是在单元格内的每个音符上。

任何人都可以让我知道我该如何实现这一目标？也为整个单元格或整个列应用样式。

我正在使用Ant Design表格来呈现数据。

标签： javascripthtmlcssreactjsantd

解决方案

我已经用下面的代码修复了

export const SectionNotes = notes => {
  if (!notes) return '';
  /* eslint-disable react/no-danger */   

  return notes.map((note, index) => (
    <div key={note}>
      <span style={{ fontWeight: 'bold' }}>
        {index + 1}.{' '}   
      </span>   
      <span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
    </div>      
  ));   
  /* eslint-enable react/no-danger */    
};


export const renderSectionNotes = text => {
  return <div style={{ maxHeight: 250, overflowY: 'auto' }}>{SectionNotes(text)}</div>;
};

然后我像下面这样使用

fieldDefs: (results, isJsonData) => [
{
  title: 'Notes',
  name: 'notesHTML',
  table: {
    render: renderSectionNotes,
    searchable: true,
    width: 200
  }
}]

推荐阅读