溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“怎么用vue+elemet實現(xiàn)表格手動合并行列”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
1.初始化一個element的table表格，選中一個單元格選擇合并行和列,參考element文檔需要使用到的方法是objectSpanMethod,注意:objectSpanMethod參數(shù)行和列都是從0開始，比如第一行第一列單元格位置是(0,0)，要合并的行和列最小為1
2.實現(xiàn)效果如下：
3.代碼如下：
<template>
<div class="content">
<div class="table_box" v-if="show">
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
border
:span-method="objectSpanMethod"
@cell-dblclick = "dbclick"
:cell-class-name="tableCellClassName"
@cell-click="cellClick"
>
<el-table-column
v-for="(item,key,index) in tableColumns"
:key="index"
:label="item.label"
:prop="item.children?'':item.prop"
width="180">
<el-popover
placement="right"
width="400"
slot-scope="scope"
trigger="click">
<el-button size="mini" type="primary" @click="dialogVisible = true">合并單元格</el-button>
<el-button size="mini" type="primary" @click="addTr('top',selectTab.tr)">向上插入一行</el-button>
<el-button size="mini" type="primary" @click="addTr('bottom',selectTab.tr)">向下插入一行</el-button>
<div slot="reference">
<span>{{ scope.row[item.prop] }}</span>
</div>
</el-popover>
<div v-if="item.children && item.children.length>0">
<el-table-column
v-for="(val,i) in item.children"
:key="i"
:prop="val.prop"
:label="val.label"
width="180">
<!-- <template slot-scope="scope">
<span>{{ scope.row[val.prop] }}22</span>
</template> -->
<el-popover
placement="right"
width="400"
slot-scope="scope"
trigger="click">
<el-button size="mini" type="primary" @click="dialogVisible = true">合并單元格</el-button>
<el-button size="mini" type="primary" @click="addTr('top',selectTab.tr)">向上插入一行</el-button>
<el-button size="mini" type="primary" @click="addTr('bottom',selectTab.tr)">向下插入一行</el-button>
<div slot="reference">
<span>{{ scope.row[val.prop] }}</span>
</div>
</el-popover>
</el-table-column>
</div>
</el-table-column>
</el-table>
</div>
<el-dialog
title="合并"
:visible.sync="dialogVisible"
width="300px"
>
<el-form ref="form" label-width="80px">
<el-form-item label="合并行">
<el-input :min="0" v-model="selectTab.trSpan"/>
</el-form-item>
<el-form-item label="合并列">
<el-input :min="0" v-model="selectTab.tdSpan"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="addMerge" size="small">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return{
tableData:[],//表格數(shù)據(jù)
tableColumns:[],//表頭數(shù)據(jù)
show:false,
currentRow: null,
spanArr:[],
selectTab:{
tr:0,//第幾行
td:0,//第幾列
trSpan:1,//占幾行
tdSpan:1,//占幾列
},
mergeList:[],//記錄合并詳情
dialogVisible:false,
}
},
watch:{
// mergeList:{//監(jiān)聽合并列表項
// handler(newVal,oldVal){
// console.log('刷新');
// this.show = false;
// this.$nextTick(()=>{
// this.show = true;
// })
// },
// deep:true
// }
},
mounted(){
this.init();
},
methods:{
tableCellClassName({row, column, rowIndex, columnIndex}){
//注意這里是解構(gòu)
//利用單元格的 className 的回調(diào)方法，給行列索引賦值
row.index=rowIndex;
column.index=columnIndex;
},
cellClick(row, column, cell, event){
console.log('rowIndex',row.index);
console.log('colIndex',column.index);
this.selectTab.tr = row.index+1;
this.selectTab.td = column.index+1;
},
dbclick(row, column, cell, event){
console.log('row:',row);
console.log('column:',column,);
console.log('cell:',cell);
console.log('event:',event);
this.selectTab.tr = row.index+1;
this.selectTab.td = column.index+1;
},
addMerge(){//合并項添加進(jìn)合并列表中
// let obj = this.mergeList.filter(item=>item.td==this.selectTab.td&&item.tr)
let flag = false;
let w = -1;
this.mergeList.forEach((item,index)=>{
if(item.td==this.selectTab.td && item.tr==this.selectTab.tr){//是否有重復(fù)項,有則替換
flag = true;
w = index;
}
})
if(flag){
this.mergeList[w] = Object.assign({},this.selectTab);
}else{
this.mergeList.push(Object.assign({},this.selectTab));
}
this.dialogVisible = false;
this.show = false;//手動刷新
this.$nextTick(()=>{
this.show = true;
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {//表格的合并函數(shù)
//console.log('列',columnIndex,rowIndex);
//console.log('行',row,column);0,2
// let td = Number(this.selectTab.td)-1;//columnIndex從0開始
// let tr = Number(this.selectTab.tr)-1;//rowIndex從0開始
// if( columnIndex>=td && columnIndex<=((Number(td)+Number(this.selectTab.trSpan))-1)){
// if( rowIndex>=tr && rowIndex<=((Number(tr)+Number(this.selectTab.tdSpan))-1)){
// if(columnIndex==td && rowIndex==tr){
// return [this.selectTab.tdSpan,this.selectTab.trSpan]
// }else{
// console.log('選擇的行列',columnIndex,rowIndex);
// console.log('選擇的列',this.selectTab.td,(Number(this.selectTab.td)+Number(this.selectTab.tdSpan))-1);
// console.log('選擇的行',this.selectTab.tr,(Number(this.selectTab.tr)+Number(this.selectTab.trSpan))-1);
// return [0,0]
// }
// }
// }
if(this.mergeList.length>0){
console.log('merge',this.mergeList);
for(let i=0;i<this.mergeList.length;i++){
let item = this.mergeList[i];
let td = Number(item.td)-1;//columnIndex從0開始
let tr = Number(item.tr)-1;//rowIndex從0開始
if( columnIndex>=td && columnIndex<=((Number(td)+Number(item.trSpan))-1)){
if( rowIndex>=tr && rowIndex<=((Number(tr)+Number(item.tdSpan))-1)){
if(columnIndex==td && rowIndex==tr){
console.log('選中的行列',columnIndex,rowIndex,item.tdSpan,item.trSpan);
return [item.tdSpan,item.trSpan]
}else{
console.log('選擇的行列',columnIndex,rowIndex);
// console.log('選擇的列',this.selectTab.td,(Number(this.selectTab.td)+Number(this.selectTab.tdSpan))-1);
// console.log('選擇的行',this.selectTab.tr,(Number(this.selectTab.tr)+Number(this.selectTab.trSpan))-1);
return [0,0]
}
}
}
}
}
//forEach中使用return不會中斷，相當(dāng)于continue
// this.mergeList.forEach(item=>{
// let td = Number(item.td)-1;//columnIndex從0開始
// let tr = Number(item.tr)-1;//rowIndex從0開始
// if( columnIndex>=td && columnIndex<=((Number(td)+Number(item.trSpan))-1)){
// if( rowIndex>=tr && rowIndex<=((Number(tr)+Number(item.tdSpan))-1)){
// if(columnIndex==td && rowIndex==tr){
// console.log('選中的行列',columnIndex,rowIndex,item.tdSpan,item.trSpan);
// return [item.tdSpan,item.trSpan]
// }else{
// console.log('選擇的行列',columnIndex,rowIndex);
// // console.log('選擇的列',this.selectTab.td,(Number(this.selectTab.td)+Number(this.selectTab.tdSpan))-1);
// // console.log('選擇的行',this.selectTab.tr,(Number(this.selectTab.tr)+Number(this.selectTab.trSpan))-1);
// return [0,0]
// }
// }
// }
// })
},
init(){//初始化表格
// if(this.tdCount==0){
// this.tableColumns = [{label:'默認(rèn)',prop:'default'}];
// this.tableData = [{default:0}];
// }
this.tableColumns = [
{label:'默認(rèn)',prop:'default'},
{label:'雙十一',prop:'',children:[{label:'庫存',prop:'count'},{label:'銷量',prop:'sale'}]},
];
this.tableData = [
{default:0,count:111,sale:100},
{default:0,count:173,sale:220},
{default:0,count:89,sale:120}
];
this.show = true;
},
addTab(){//插入表頭
if(this.tableColumns.every(item=>item.label!=this.tab.label)){
this.tableColumns.push(Object.assign({},this.tab));
}else{
this.$notify.error({
title: '錯誤',
message: '表頭重復(fù)'
});
}
},
addTr(way,index){//插入一行數(shù)據(jù)
let obj = {};
// this.tableColumns.forEach(item=>{
// obj[item.prop] = Math.floor(Math.random()*100);
// })
obj = this.getObj(this.tableColumns,obj);
console.log('obj',obj);
if(way=='top'){//在第index行之前插入一行
this.tableData.splice(index-1,0,obj);
}else{在第index行之后插入一行
this.tableData.splice(index,0,obj);
}
},
getObj(tabs,obj){
tabs.forEach(item=>{
if(item.children){
this.getObj(item.children,obj);
}else{
obj[item.prop] = Math.floor(Math.random()*100);
}
})
return obj;
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {//點擊行事件
console.log('val',val);
this.currentRow = val;
},
}
}
</script>
<style scoped>
</style>“怎么用vue+elemet實現(xiàn)表格手動合并行列”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼