全国服务热线:4008-888-888

行业新闻

小程序商城运营优化_Vue封装的可修改表格插件方

Vue封装的可编辑表格插件方法       今天小编就为大家分享一篇Vue封装的可编辑表格插件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

页面效果如图:

页面使用如下:

 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{
 pro凡科抠图:{
 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'
mon = {//全局安装
 install:function(Vue){
 ponent('vTable',vtable);
 ponent('vPag',vpagination);
mon

main.js中引入

mon from './mon/index.js'
mon)

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封装的可编辑表格插件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服