vue+element-ui+slot-scope或原生实现可编辑表格(日历)

你们公司的产品是不是还在做一个可编辑表格功能?

1.前言

咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。

2.思路

可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下面我简单说哈我的两种方法:

3.方法一:

直接通过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,可以拿这些参数做相应的筛选,然后使用操作dom的方法添加input达到更改值的作用,贴上原生代码:




这个方法确实可以实现功能,谁让原生js功能强大的。

4.方法二:

<1.>在element的table组件中使用slot-scope(作用域插槽)来实现该需求,就相当于将直接作为的子组件使用,不用绑定对应的方法,直接用:hover方法就可以修改的样式
<2.>slot-scope可能有些人有点陌生,这里贴上官网的链接请戳这里,里面很详细


   
   
       
   
 

<3.>我开发的时候碰到一个大的问题是,el-table-column里面的值怎么传到el-input中去?

<4.>实际上slot-scope的值可以解决这个问题,vue原生slot-scope 的值将被用作一个临时变量名,可以接收父组件传过来的值, 而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row拿到对应的值.

<5.>如果想详细了解slot-scope里面封装值的情况,可以将下面这个代码复制到vue文件中,在浏览器中就可以看到效果:


       
       
           
       


5.方法三:

直接在原生

里面嵌套标签,然后通过改变样式来改变边框的显示,直接贴上代码,复制即可演示!






6.三种方法的对比

1.其实本质上都是利用标签可以修改文本的特性;
2.方法三是最简单的可以利用

嵌套直接实现表格的修改,还可以结合v-model来双向绑定数据,只是需要自己手动是修改下样式,
3.有个问题:如果是合并的行或列需要修改应该怎么实现?
这边首先要实现表格的合并功能,有篇文章讲的这个,vue+element实现表格跨行或跨列
然后可以套用这篇文章的三个方法
3.方法二如果项目在使用vue+element技术也是一种不错的选择

7.很开心你还能看到这里,棒棒哒!欢迎交流.

7.日历

日历可以直接对应将slot-scope里面的组件改为日期组件就可以

你可能感兴趣的:(vue+element-ui+slot-scope或原生实现可编辑表格(日历))