以上是表单TA的一条记录的行内编辑,这条记录的操作列有一个编辑按钮和删除按钮,点击编辑在此条记录的下方展示一个表单FB,
表单FB又包含一个表格TB和一个表单FC列表 表格TB可以增加记录,删除记录,记录中是行内编辑...表单FB有一个保存和取消按钮, 取消可以还原上次数据....我来说一下查的资料,我们使用的技术栈是vue,ele 于是我去看了一下ele的table组件,发现了这个
看了这种效果确实是可以实现的,于是F12开始分析表格结构
由此可见,在表格的tr中 第一个tr是正常的表格行...,紧跟着的第二行是扩展表单,使用 合并列,使其呈现出非表格样式,既然是这样的话,那我们在渲染表格的时候,就需要二条数据渲染成一条记录,另外一条在点击编辑按钮后显示.这个难题解决了...接下来开始设计数据结构,别慌在这之前我想先谈一下前端数据驱动的页面设计
数据驱动:
关于数据驱动有的人解释为:当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom
相比以往jquery