vue+elemet实现表格手动合并行列

Prunella ·

更新时间:2024-09-20

· 1496 次阅读

本文实例为大家分享了vue+elemet实现表格手动合并行列的具体代码，供大家参考，具体内容如下

1.初始化一个element的table表格，选中一个单元格选择合并行和列,参考element文档需要使用到的方法是objectSpanMethod,注意:objectSpanMethod参数行和列都是从0开始，比如第一行第一列单元格位置是(0,0)，要合并的行和列最小为1

2.实现效果如下：

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:[],//表格数据
            tableColumns:[],//表头数据    
            show:false,
            currentRow: null,
            spanArr:[],
            selectTab:{
                tr:0,//第几行
                td:0,//第几列
                trSpan:1,//占几行
                tdSpan:1,//占几列
            },
            mergeList:[],//记录合并详情
            dialogVisible:false,
        }
    },
    watch:{
        // mergeList:{//监听合并列表项
        //     handler(newVal,oldVal){
        //         console.log('刷新');
        //         this.show = false;
        //         this.$nextTick(()=>{
        //             this.show = true;
        //         })
        //     },
        //     deep:true
        // }
    },
    mounted(){
        this.init();
    },
    methods:{
        tableCellClassName({row, column, rowIndex, columnIndex}){
            //注意这里是解构
            //利用单元格的 className 的回调方法，给行列索引赋值
            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 }) {//表格的合并函数
            //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){//插入一行数据
            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

1024 个赞