vue-split-table【表格合并和编辑插件】

vue-split-table应用的效果图

 

vue-split-table开源地址,欢迎star,现在已经开源和同步到npm上
轻松搞定表格拆分或者合并,编辑,再也不怕被产品怼啦

1.核心源码分析

 1. 里面嵌套

实现表格拆分; 
 2. 原生实现复选框的单选和全选功能;  
 3. props属性像父组件暴露属性值;
 4. $emit自定义事件方法向父组件传值;  
 5. 作用域插槽由父向子传入html标签;
 6. 嵌套input标签实现表格编辑,v-for不允许input标签里面使用v-model改变item值问题解决;
 7. webpack打包配置

[vue-split-table开源地址][2],欢迎star和pr

2.暴露的Attributes

参数 说明 是否必传 类型 Default
headData 表头内容 Array 必传  
bodyData 表体内容 Array 必传  
checkFlag 是否有复选列 Boolean 可选  
tableEditFlag 表格是否可编辑 Boolean 可选 True
operFlag 是否有操作列 Boolean 可选 True

3.暴露的Events

name 说明 参数
multipleData 当选项发生变化触发 multipleData
editData 表格编辑文本框失焦触发 editData

 4.slot

事件名 说明
operate 配置操作列后就可通过设置slot来配置操作的内容

5.撸起示例代码

基于vue工程


```

 

你可能感兴趣的:(前端小而全的知识归纳)