vue可编辑表格插件

可任意合并表头，实现单元格编辑。

页面效果如图：

页面使用如下：

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‘}]]

}

}

}

目录结构如下：

vtable.vue代码如下：

{{label.label}}

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