vue+element自定义表格遇到的问题

使用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.开关的开启和关闭的传值


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值