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

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

页面效果如图：

页面使用如下：

目录结构如下：

vtable.vue代码如下：

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

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

以上这篇Vue封装的可编辑表格插件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。