内容简介:vue-split-table应用的效果图
vue-split-table应用的效果图
vue-split-table开源地址 ,欢迎star,现在已经开源和同步到npm上 轻松搞定表格拆分或者合并,编辑,再也不怕被产品怼啦
1.核心源码分析
- 里面嵌套实现表格拆分;
- 原生实现复选框的单选和全选功能;
- props属性像父组件暴露属性值;
- $emit自定义事件方法向父组件传值;
- 作用域插槽由父向子传入html标签;
- 嵌套input标签实现表格编辑,v-for不允许input标签里面使用v-model改变item值问题解决;
- webpack打包配置
vue-split-table开源地址 ,欢迎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工程 <template> <split-table :headData="headData" :bodyData="bodyData" @multipleData="multipleData" @editData="editData"> <template slot="operate" slot-scope="props"> <span @click="splitEdit(props.rowData)">修改</span> <span @click="splitAdd(props.rowData)">新增</span> <span @click="splitDel(props.rowData)">删除</span> </template> </split-table> </template> <script> import SplitTable from 'vue-split-table'; export default { components: { SplitTable }, data () { return { headData: ["城市", "美食", "好玩的地方"], bodyData: [ { city: "北京", food: "北京烤鸭", fun: ["故宫", "颐和园", "长城"] }, { city: "深圳",food: ["肠粉", "牛肉火锅"],fun: ["西冲", "华侨城", "世界之窗"] }, { city: ["重庆", "成都", "武汉"], food: ["重庆老火锅","重庆烤鱼","重庆小面","成都小吃","武汉热干面"], fun: ["洪崖洞", "峨眉山", "黄鹤楼"] } ], } }, methods: { splitEdit(rowData) { console.log("rowData值为", rowData); }, editData(data) { console.log("编辑所在行的值为", data); } splitAdd(data) { console.log("新增所在行的值为", data); }, splitDel(data) { console.log("删除所在行的值为", data); }, multipleData(data) { console.log("复选框选择的值为", data); } } } </script> 复制代码
参考文章:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 记一次用iview实现表格"合并"单元格的具体操作
- ElementUI 实现表格可编辑 Editable,增删改查编辑表格Grid
- 分组字符合并SQL语句 按某字段合并字符串之一(简单合并)
- git 的合并原理(递归三路合并算法)
- 开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐
- html复杂表格
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Laravel框架关键技术解析
陈昊、陈远征、陶业荣 / 电子工业出版社 / 2016-7 / 79.00元
《Laravel框架关键技术解析》以Laravel 5.1版本为基础,从框架技术角度介绍Laravel构建的原理,从源代码层次介绍Laravel功能的应用。通过本书的学习,读者能够了解Laravel框架实现的方方面面,完成基于该框架的定制化应用程序开发。 《Laravel框架关键技术解析》第1章到第4章主要介绍了与Laravel框架学习相关的基础部分,读者可以深入了解该框架的设计思想,学习环......一起来看看 《Laravel框架关键技术解析》 这本书的介绍吧!
SHA 加密
SHA 加密工具
HSV CMYK 转换工具
HSV CMYK互换工具