VUE elementUI 表格编辑的另类写法和验证
我这是第二次写项目,第一次遇到要表格行编辑,和行验证(我算是初学前端的32岁小叔叔。
然后这次遇到要写行内编辑的 我看了下百度上大部分的写法 都是千篇一律, 都是在行内写判断或者对整个数据加属性,
之前写的3个查询页面,被武汉的一位顶尖的架构师下了毒, 写代码也变成 抽象方式,然后
这里 对自己的写法也做一次总结,第一次写,可能以后我自己也忘记了,所以最大的作用是给自己一个回顾的学习和 重新在改良的思考
我写的每个循环表格 带编辑的写法 都是利用数据 不同点,和过滤层的方式,类似node过滤层 后端PHP 和ASP 思想的函数式和对象式写法。
另一种 可编辑行内表格的 写法是
1,利用当前行对象唯一标识符ID 和对应的索引,这个表格和上面的文字都在另一个循环体内,所以必须要2个唯一标识符,才能确认唯一性
2,利用选中行 存储当前带出的数据 ,data中只要定义一个当前行 初始值对象 DEFROW 和行对象CURROW,利用设定时间 100之后设定为编辑状态,这样子就不会被其他操作关闭你的编辑状态,而进行所有的界面操作是 ,操作是否保存正在编辑的数据
3initROW 这个函数的作用是 恢复初始值,因为是 传的是地址,改变CURROW 的的任意属性 都是 对原始的 tableData的数据在操作赋值。
不能 this.CURROW = this,DEFROW 或者 {...this,DEFROW}着都是错的
设置编辑当前行的数据和默认数据的赋值与解构保存数据也是比较简单的
提交CURROW 就是当前编辑的行数据,
提交代码适合的数据获取 表格编辑的写法 整个红色区域都是循环的,所有这里有很多个可编辑的 独立表格前端想要进步很快的朋友们,确实需要对底层的东西研究的比较熟悉,然后写东西的思路尽量不要沿袭别人的思路,这个学习过程的时间成本很高,但是一旦成功了 进步式跳跃式的。大部分前端架构师就式个中级水平以下,高级的大师 写的代码 都很艺术化!
看完自己的代码 总结优化写法和设计写法,在熟悉复杂数据之间的转化 思路处理,进步都每天的,时间问题~
网友评论