将样式应用于 antd 表格列答案

【问题标题】：applying styles to antd table column将样式应用于 antd 表格列
【发布时间】：2020-11-18 20:45:17
【问题描述】：

我有下表列配置，我正在使用自定义函数呈现注释

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 表来呈现数据。

【问题讨论】：

谁能告诉我如何实现这一目标

标签： javascript html css reactjs antd

【解决方案1】：

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

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
  }
}]

【讨论】：