Vue封装的可编辑表格插件方法


Posted in Javascript onAugust 28, 2018

可任意合并表头,实现单元格编辑。

页面效果如图:

Vue封装的可编辑表格插件方法

页面使用如下:

<template>
 <div>
  <v-table 
   :datat = "tableData" 
   :thlabel="thlabel"
   :isEdit="true">
  </v-table>
 </div>
</template>

<script>
 export default{
  data(){
   return{
    tableData:[{'a':'1','b':'2','c':'3','d':'8'},{'a':'4','b':'5',c:'6',d:'9'}],
    thlabel:[[{label:'测试1',prop:'a',rowspan:'2'},{label:'测试2'},{label:'测试3',colspan:'2'}],
      [{prop:'c',label:'表头2'},{prop:'b',label:'表头3'},{prop:'d',label:'表头4'}]]
   }
  }
 }
</script>

目录结构如下:

Vue封装的可编辑表格插件方法

vtable.vue代码如下:

<template id="vtable"> 
 <table>
  <thead>
   <tr v-for="(i,index) in rownum">
    <th v-for="label in thlabel[index]">{{label.label}}</th>
   </tr>
  </thead>
  <tbody>
   <tr v-for="data in datat">
    <td v-for="key in labelprop" @click="tdEdit($event)"><input type="text" v-model="data[key]"/></td>
   </tr>
  </tbody>
 </table>
</template>

<script>
 export default{
  props:{
   datat:{
    type:Array,
    required:true
   }, 
   thlabel:{//表头数组
    type:Array,
    required:true
   },
   isEdit:{
    type:Boolean,
    required:true
   }
  },
  data(){
   return{
    datata:''
   }
  },
  computed:{
   rownum:function(){//表头行数
    return this.thlabel.length;
   },
   labelprop:function(){//取出表头数据依次对应的字段key
    let thlab = this.thlabel;
    var ar = [];
    for(let i=0;i<thlab.length;i++)
     for(let j=0;j<thlab[i].length;j++){
      for(var key in thlab[i][j]){
       if(key == 'prop'){
        ar.push(thlab[i][j][key])
       }
      }
     }
    return ar;
   },
  },
  mounted:function(){
   this.$nextTick(function(){
    $('td').attr('isEdit',this.isEdit);
    var a = this.thlabel;
    for(let i=0;i<a.length;i++)
     for(let j=0;j<a[i].length;j++){
      for(var key in a[i][j]){
       if(key == 'rowspan'){
        $($('tr').eq(i).find('th').eq(j)).attr('rowspan',a[i][j][key]);
       }else if(key == 'colspan'){
        $($('tr').eq(i).find('th').eq(j)).attr('colspan',a[i][j][key]);
       }
      }
     }
    }
   )
  },
  methods:{
   tdEdit:function(event){
    var h = event.currentTarget;
    if($(h).attr('isEdit')){
     $(h).find('input').attr("readOnly",false);
     $(h).addClass('tdclick').siblings().removeClass('tdclick');
     $(h).addClass('tdclick').parent('tr').siblings().find('td').removeClass('tdclick');
    }else{
     $(h).find('input').attr("readOnly",true);
    }
   }
  } 
 }
</script>

<style>
@import './scss/vtable.css';
</style>

index.js代码如下:

import Vue from 'vue'
import vtable from './vtable/vtable.vue'
import vpagination from './vpagination/vpagination.vue'
const common = {//全局安装
 install:function(Vue){
  Vue.component('vTable',vtable);
  Vue.component('vPag',vpagination);
 }
}
export default common

main.js中引入

import common from './components/common/index.js'
Vue.use(common)

css样式代码:

table {
 border: 1px solid #EBEEF5;
 height: 200px;
 width: 300px;
 text-align: center;
 margin-left: 40px; }
 table td {
 border: 1px solid #EBEEF5;
 position: relative;
 color: #606266; }
 table th {
 text-align: center;
 border: 1px solid #EBEEF5;
 background-color: #F5F7FA;
 color: #909D8F;
 line-height: 60px; }

tr:hover {
 background-color: #F6F8FB; }
.tdclick:after{
 content: ' ';
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 border: 1px solid blue;
 pointer-events: none;
}
input{
 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
 border: none;
 outline: none;
}
/*# sourceMappingURL=vtable.css.map */

如有错误或可改进的地方,请指正!

以上这篇Vue封装的可编辑表格插件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 #Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 #Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 #Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 #Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
如何让CI框架支持service层
2014/10/29 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
前端性能优化建议
2020/09/17 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
关于幼儿的自我评价
2013/12/18 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
项目申请汇报材料
2014/08/16 职场文书
个人租房协议书范本
2014/09/30 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2014司机年终工作总结
2014/12/05 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP