Question

我有一个要显示的表，对于嵌套表的每一行，单击数字后，将扩展嵌套表。因此，每个嵌套表标题都有标题，并且正在映射它并显示。

现在最棘手的部分是：对于嵌套标题标题“ a”，特定的索引行将在道具“ show_column”中具有布尔值的属性。如果该列的值为false，那么我们只需要隐藏标题中的特定列即可。

无论如何，我们可以动态显示每一行。

我试图使用地图，但被卡住了如何处理它。

从下面的代码开始，标题是嵌套表头的值并被映射，行将从prop值映射。在最后一次返回中，我们将显示表标题和表行。

//structure of props would be like as below

heads: {full_name: "Member name", premiumType: "Premium type", class_id: "Class", location_department: "Location", effective_date: "Effective date", …}
**members: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]**
onColumnSort: ƒ ()
onPageChange: ƒ ()
pagination: {records: 550, offset: 0, limit: 10}
sortBy: {columns: {…}, direction: -1}
total: {grand: 8294.77, details: Array(15)}
//and the nested member details of props as below
members: Array(10)
0: {premium_type: "Premium", member_name: "ADDRESS, SPOUSEADD R", class_cd: "0019", location: "", effective_date: "", …}
1: {premium_type: "Premium", member_name: "ALAPAI, ANGLE", class_cd: "0001", location: "", effective_date: "", …}

//members props
  members: Array(10)
0:
class_cd: "0019"
coverage_info: [{…}]
effective_date: ""
location: ""
memb_seq_nr: "1"
member_name: "ADDRESS, SPOUSEADD R"
new_member_added: false
premium_adjustment: false
premium_type: "Premium"
reason: ""
show_plan_column: false
**show_volume_column: false**
total_premium: "8.00"

const titles = [
  { title: a, size: 40 },
  { title: b, size: 20 },
  { title: c, size: 10 },
  { title: d, size: 20 },
  { title: e, size: 10 },
];

const head = titles.map((th, i) => {

  return <th key={i} style={{ width: `${th.size}%` }}><FormattedMessage {...th.title} /></th>;
});

const rows = details.map((item, i) => {

  return <tr key={i}>
    <td>{item.coverage_name}</td>
    <td>{item.volume}</td>
    <td>{item.family_indicator}</td>
    <td>{this.getNumber(item.new_premium)}</td>
    <td>{this.getNumber(item.current_premium)}</td>
  </tr>
})

return <Table className="details"><thead>{head}</thead><tbody>{rows}</tbody></Table>

}

有什么方法可以根据支持值

0 个答案: