今天小编就为大家分享一篇Vue封装的可编辑表格插件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
可任意合并表头，实现单元格编辑。
页面效果如图：
页面使用如下：
目录结构如下：
vtable.vue代码如下：
{{label.label}}
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 commonmain.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封装的可编辑表格插件方法的详细内容，更多请关注0133技术站其它相关文章！
