使用vue+element实现了一个自定义的表格,需求如下:
看似简单的功能实现起来有些细节真的不好处理
1.点击编辑实现可编辑标题,这个地方纯粹用的js的DOM操作,官网上只提供了方法handleClick,但是没有举例具体怎么实现,用element的属性或者方法没有办法实现,所以只能操作dom,给展示标题的div添加contenteditable:true属性,还有一种方法就是将表格的标题栏使用el-input type='text' 来展示,给input使用:disable='edit'来控制是否可编辑
2.小数、排序、合计、启用这些列都是在表格中嵌套了其他的模块,所以要用table里面的自定义列来实现
这里实现一个表格不难,难的是如何让下来框选出来的值成为最终这个单元格的pop值,也就是要传到后台的值,这里是借鉴了form中的传值方法,所以想到了在el-select的v-model中使用tableData.num的想法,但是表格有多行,所以使用[scope.$index]来区分不同的行
3.开关的开启和关闭的传值