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

2018-10-23 admin

前言

vue-split-table应用的效果图

图片描述

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

1.核心源码分析

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

参考文章:

时钟组件

原文链接:https://segmentfault.com/a/1190000016769754

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43395.html

文章标题:vue-split-table【表格合并和编辑插件】

相关文章
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=/&quot;css&/index.html type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
回到顶部