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

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

今天小编就为大家分享一篇Vue封装的可编辑表格插件方法，具有很好的参考价值，希望对大家有所帮助。一起

跟随小编过来看看吧

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

页面效果如图：页面效果如图：

页面使用如下：页面使用如下：

<template>

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

}

}

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

type:Array,

required:true

},

thlabel:{//表头数组

type:Array,

required:true

},

isEdit:{

type:Boolean,

required:true

},

computed:{

rownum:function(){//表头行数