vue-split-table应用的效果图
,欢迎star,现在已经开源和同步到npm上 轻松搞定表格拆分或者合并,编辑,再也不怕被产品怼啦
1.核心源码分析
- 里面嵌套实现表格拆分;
- 原生实现复选框的单选和全选功能;
- props属性像父组件暴露属性值;
- $emit自定义事件方法向父组件传值;
- 作用域插槽由父向子传入html标签;
- 嵌套input标签实现表格编辑,v-for不允许input标签里面使用v-model改变item值问题解决;
- webpack打包配置
,欢迎star和pr
2.暴露的Attributes
| 参数 | 说明 | 类型 | 是否必传 | Default |
|---|---|---|---|---|
| headData | 表头内容 | Array | 必传 | - |
| bodyData | 表体内容 | Array | 必传 | - |
| checkFlag | 是否有复选列 | Boolean | 可选 | True |
| tableEditFlag | 表格是否可编辑 | Boolean | 可选 | True |
| operFlag | 是否有操作列 | Boolean | 可选 | True |
3.暴露的Events
| name | 说明 | 参数 |
|---|---|---|
| multipleData | 当选项发生变化触发 | multipleData |
| editData | 表格编辑文本框失焦触发 | editData |
4.slot
| 事件名 | 说明 |
|---|---|
| operate | 配置操作列后就可通过设置slot来配置操作的内容 |
5.撸起示例代码
基于vue工程修改 新增 删除 复制代码