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 */

如有错误或可改进的地方，请指正！