javascript - 从父行提供表子行数据
问题描述
我需要知道单击子行时父行 ID 是什么,所以我的想法是为每个子行提供父行的 ID,以便我们可以通过这种方式获取数据。目前正试图在循环后端数据并为表格格式化每一行的代码中找到一种方法。
tableContent() {
if (this.$store.state.models.models) {
// store the function
const mapper = (model) => ({
name: model.children ? (
<span class='model'>
{model.year} {model.name} <span class='hide'>{model.id}</span>
<button class='add-trim' onClick={this.addTrimDrawer}>
<PlusIcon class='plus-icon' /> add trim
</button>
</span>
) : (
<span class='edit-trim' onClick={this.editTrimDrawer}>
{model.name} <span>{model.trim_id}</span>
<EditIcon class='edit-icon' />
</span>
),
id: model.trim_id ? `trim-${model.trim_id}` : `model-${model.id}`,
technical: model.children ? null : <ChecklistIcon class='tech checklist-icon' />,
customer_delivery: model.children ? null : <ChecklistIcon class='cd checklist-icon' />,
customer_acceptance: model.children ? null : <ChecklistIcon class='ca checklist-icon' />,
off_the_truck: model.children ? null : <ChecklistIcon class='oft checklist-icon' />,
vim: model.children ? null : <ChecklistIcon class='vim checklist-icon' />,
// use it for children, if there are any
children: model.children?.map(mapper),
});
// use it for the models
this.tableData = this.$store.state.models.models.map(mapper);
}
},
解决方案
推荐阅读
- javascript - node-cron 是否并行运行任务?
- bootstrap-4 - 菜单悬停未正确关闭
- c# - azure 聊天机器人的前端源文件在哪里?
- spring-boot - 如何使春季会话在多个请求中持续存在?
- reactjs - 如何确保使用 `gcloud app deploy` 使用的是我的构建文件夹而不是我的开发文件?
- android - 我们可以将 JitsiMeetView 添加到我们的自定义布局中吗?
- javascript - 我如何(并且应该)在 DOM 对象上创建其他方法?
- android - 如何修复错误“无法实例化服务 *<*.TimerIntentService> 没有零参数构造函数”
- python - 如何使用 xlsxwriter 模块在多个单元格中的 Excel 中动态编写公式?
- reactjs - React Typescript:使用 BrowserRouter 的通配符路由