可任意合并表头,实现单元格编辑。
页面效果如图:
页面使用如下:
<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 id="vtable"> <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封装的可编辑表格插件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]
- 明达年度发烧碟MasterSuperiorAudiophile2017[DSF]
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WAV+CUE】
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]