Vue如何封装可编辑表格插件
短信预约 -IT技能 免费直播动态提醒
这篇文章给大家分享的是有关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{
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;
}
感谢各位的阅读!关于“Vue如何封装可编辑表格插件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341