Vue封装的可编辑表格插件方法
程序员文章站
2022-07-22 17:00:41
可任意合并表头，实现单元格编辑。
页面效果如图：
页面使用如下：
可任意合并表头，实现单元格编辑。
页面效果如图：
页面使用如下：
<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封装的可编辑表格插件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
推荐阅读
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之十数据库基础方法的封装
-
vue 组件的封装之基于axios的ajax请求方法
-
vue项目中使用vue-layer弹框插件的方法
-
vue 2.x 中axios 封装的get 和post方法
-
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
-
基于vue框架手写一个notify插件实现通知功能的方法
-
在vue中封装可复用的组件方法
-
vue（5）—— vue的路由插件—vue-router 常用属性方法
-
vue使用pdfjs显示PDF可复制的实现方法
-
vue 2.0封装model组件的方法