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

 更新时间:2018年08月28日 10:23:54   作者:sdtear  
今天小编就为大家分享一篇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>

目录结构如下:

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封装的可编辑表格插件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目本地开发完成后部署到服务器后报404错误解决方案

    vue项目本地开发完成后部署到服务器后报404错误解决方案

    很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后会发现或多或少的问题,这篇文章主要给大家介绍了关于vue项目本地开发完成后部署到服务器后报404错误的解决方案,需要的朋友可以参考下
    2024-01-01
  • 在vue.js中使用JSZip实现在前端解压文件的方法

    在vue.js中使用JSZip实现在前端解压文件的方法

    今天小编就为大家分享一篇在vue.js中使用JSZip实现在前端解压文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue自动化注册全局组件脚本分享

    Vue自动化注册全局组件脚本分享

    这篇文章主要介绍了Vue自动化注册全局组件脚本,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vite+vue3使用@路径报错处理

    vite+vue3使用@路径报错处理

    本文主要介绍了vite+vue3使用@路径报错处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • vue+elemet实现表格手动合并行列

    vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue3中7种路由守卫的使用大全举例

    vue3中7种路由守卫的使用大全举例

    最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,下面这篇文章主要给大家介绍了关于vue3中7种路由守卫的使用大全,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue el-checkbox实现全选单选方式

    vue el-checkbox实现全选单选方式

    这篇文章主要介绍了vue el-checkbox实现全选单选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • vscode中vue-cli项目es-lint的配置方法

    vscode中vue-cli项目es-lint的配置方法

    本文主要介绍vscode中 vue项目es-lint的配置方法,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧
    2018-07-07
  • Vue自定义多选组件使用详解

    Vue自定义多选组件使用详解

    这篇文章主要为大家详细介绍了Vue自定义多选组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论