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 에 포 장 된 편집 가능 한 표 플러그 인 방법 은 바로 여러분 께 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.