vue+elemet實現(xiàn)表格手動合并行列
更新時間：2022年08月30日 12:08:05 作者：蜂巢糖FCT
這篇文章主要為大家詳細介紹了vue+elemet實現(xiàn)表格手動合并行列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+elemet實現(xiàn)表格手動合并行列的具體代碼，供大家參考，具體內(nèi)容如下
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(){//合并項添加進合并列表中
? ? ? ? ? ? // 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){//是否有重復項,有則替換
? ? ? ? ? ? ? ? ? ? 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不會中斷，相當于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:'默認',prop:'default'}];
? ? ? ? ? ? // ? ? this.tableData = [{default:0}];
? ? ? ? ? ? // }
? ? ? ? ? ? this.tableColumns = [
? ? ? ? ? ? ? ? {label:'默認',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: '表頭重復'
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue.js刪除動態(tài)綁定的radio的指定項,需要的朋友可以參考下2017-06-06
本文通過實例給大家講解了vue的toast彈窗組件功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue中關(guān)于confirm確認框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的，通過Object.defineProperty對數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了Vue3+vueuse實現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue子父組件通信的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下2018-02-02
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-10-10