前端组件“可编辑表格”，怎么设计才好

发布网友发布时间：2022-04-19 19:58

共1个回答

热心网友时间：2023-09-21 00:09

想要实现可编辑的表单，需要考虑两个事件，一个是失焦点击事件，另外一个是当用户点击单元格的input时，可以让单元格的input进行编辑。
首先，我们需要在 mole.ts 模块文件导入我们需要使用的组件依赖

导入之后，我们开始写表格组件，根据视图的 status 状态，来控制 input 的可编辑性。

在这个模板中， userName 这个字段中，通过使用一个 status 来判断这个单元格的状态，点击输入框时，我们不需要去固定去一些状态的枚举去进行操作，直接取反即可 data.status = !data.status 。当 data.status 为 true 时，表示目前是编辑状态， false 则使用 span 标签只去显示。

输入框的 { standalone: true } 时不会发生(不会添加到 FormGroup 中)

首页

文章

前端组件“可编辑表格”，怎么设计才好