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

页面效果如图：

页面使用如下：

模板div-table v-table : datat=' table data ' : th label=' th label ' : isedit=' true '/v-table/div/模板脚本导出默认值{ data(){ return { table data :[{ ' a ' : ' 1 '，' b':'2 '，' c':'3 '，' d':'8'}，{ ' a ' : ' 4 '，' b ' 3333: '测试1 '，prop:'a '，rowspan:'2'}，{label: '测试2'}，{label: '测试3 '，colspan:'2'}]，[{prop:'c '，标签: '表头2'}，{prop:'b '，标签: '表头3'}，{prop:'d '，标签: '表头4 ' }]]} } } }/脚本目录结构如下：

vtable.vue代码如下：

模板id='vtable '表在rownum' th v-for='中的d tr v-for='(i，索引)在第个标签[索引]' { { label。label } }/th/tr/d t正文tr v-for=' data t中的数据' TD v-for=' label ROP中的键' @ click=' tdEdit($ event ')输入类型=' text ' v-model=' data[key]'//TD/tr/t body/table/template脚本导出默认值{ props: { datat3表头数组type:Array，required:true }，isedit : { type :布尔值，required:true } }，data(){ return{ datata:'' }，computed : { row num 3360 function(){//表头行数返回这个。这个标签。长度；}，labelprop:function(){//取出表头数据依次对应的字段key let thlab=this . thlabelvar ar=[]；用于(设I=0；ithlab . lentigi)for(让j=0；jthlab[i].长度；{ for(thlab[I][j]中的定义变量键){ if(key==' prop '){ ar。push(thlab[I][j][key]))} } }返回ar；}，}，mounted:function(){ this .$nextTick(function(){ $('td ')).attr('isEdit '，这个。isEdit)；var a=这个。th标签；用于(设I=0；ia。长度；I)对于(让j=0；是的。长度；{对于(a[I][j]中的定义变量键){ if(key=='rowspan'){ $($('tr ').方程式(I ).查找(' th ').方程式(j)).attr('rowspan '，a[I][j][key])；} else if(key==' col span '){ $($(' tr ')).方程式(I ).查找(' th ').方程式(j)).attr('colspan '，a[I][j][key])；} } } } ) }，方法： { TDEdIt : FuncTion(event){ var h=event。CurrentTargetif($(h).attr(' isEdit '){ $(h).查找('输入')。attr('readOnly '，false)；$(小时)。addClass('tdclick ').兄弟姐妹()。remove CLaSS(' TD click ')；$(小时)。addClass('tdclick ').父代(' tr ').兄弟姐妹()。查找(' td ').remove CLaSS(' TD click ')；}else{ $(h).查找('输入')。attr('readOnly '，true)；} } } }/scriptstyle@import ' ./scss/vtable。CSS '；/styleindex.js代码如下：

从“vue”导入Vue，从“vtable”导入/vtable/vtable.vue "从导入虚拟化"。/v阴道/v阴道。vue'const common={//全局安装安装：功能(Vue){ Vue。组件(' vTable '，vTable)；Vue.component('vPag '，VPA gination)；} }导出默认commonmain.js中引入

从""导入公共.组件/公共/索引。js ' vue。使用(通用)CSS样式代码：

表{ border: 1px实心# EBEEF5高度： 200像素；宽度： 300像素；文本对齐：中心；左边距left: 40px}表格td { border: 1px实心# EBEEF5相对位置：color: # 606266}表格th { text-align : centerborder: 1px实心# EBEEF5背景-颜色： # F5F 7FA颜色： # 909D8F线高： 60px} tr :悬停{背景色： # F6F 8FB} .tdclick:after在{内容： }之后；绝对位置：显示器：块；宽度： 100%;高度： 100%;top : 0；左： 0；border: 1px纯蓝；指针事件：无；}输入{显示：块；宽度： 100%;高度： 100%;文本对齐：中心；border:无；大纲：无；}/* # SourceMappingURl=vt able。CSS。地图*/如有错误或可改进的地方，请指正！

以上Vue封装的可编辑表单的插件方法，都是边肖分享的内容。希望能给大家一个参考，支持我们。