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 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
AngularJs 常用的过滤器
May 15 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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 异常处理实现代码
2009/03/10 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
XENON基于JSON变种
2010/07/27 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python logging设置和logger解析
2019/08/28 Python
python实现视频读取和转化图片
2019/12/10 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
《乌塔》教学反思
2014/02/17 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2022微信温控新功能上线
2022/05/09 数码科技
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS