Vue如何封裝可編輯表格插件

這篇文章給大家分享的是有關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如何封裝可編輯表格插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！