页面效果如图：
页面使用如下：
<template> <div> <v-table :datat = "tableData" :thlabel="thlabel" :isEdit="true"> </v-table> </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'}]] } } } </script>
目录结构如下：
vtable.vue代码如下：
<template> <table> <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> </table> </template> <script> 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<thlab.length;i++) for(let j=0;j<thlab[i].length;j++){ for(var key in thlab[i][j]){ if(key == 'prop'){ ar.push(thlab[i][j][key]) } } } return ar; }, }, mounted:function(){ this.$nextTick(function(){ $('td').attr('isEdit',this.isEdit); var a = this.thlabel; for(let i=0;i<a.length;i++) for(let j=0;j<a[i].length;j++){ for(var key in a[i][j]){ if(key == 'rowspan'){ $($('tr').eq(i).find('th').eq(j)).attr('rowspan',a[i][j][key]); }else if(key == 'colspan'){ $($('tr').eq(i).find('th').eq(j)).attr('colspan',a[i][j][key]); } } } } ) }, methods:{ tdEdit:function(event){ var h = event.currentTarget; if($(h).attr('isEdit')){ $(h).find('input').attr("readOnly",false); $(h).addClass('tdclick').siblings().removeClass('tdclick'); $(h).addClass('tdclick').parent('tr').siblings().find('td').removeClass('tdclick'); }else{ $(h).find('input').attr("readOnly",true); } } } } </script> <style> @import './scss/vtable.css'; </style>
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封装的可编辑表格插件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: