zoukankan      html  css  js  c++  java
  • element合并单元格方法及遇到问题的解决办法

    效果如图:

    代码如下

    <!-- 查看选课 -->
    <template>
        <div>
            <el-table
                    :data="listData"
                    :span-method="objectSpanMethod"
                    border
                    style=" 100%; margin-top: 20px"
            >
                <el-table-column
                        prop="team"
                        label="团队">
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="courseId"
                        label="课程编号">
                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="课程名称">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="课程简介">
                </el-table-column>
                <el-table-column
                        prop="trainingType"
                        label="形式">
                </el-table-column>
                <el-table-column
                        prop="trainingTime"
                        label="开课时间">
                </el-table-column>
                <el-table-column
                        prop="trainingDays"
                        label="时长">
                </el-table-column>
                <el-table-column
                        prop="courseType"
                        label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.courseType === 0">待审批</span>
                        <span v-else-if="scope.row.courseType === 1">已审批</span>
                        <span v-else-if="scope.row.courseType === 2">退回重选</span>
                        <span v-else>取消重选</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="approvalStatus"
                        label="审批状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.approvalStatus === 0">待审批</span>
                        <span v-else-if="scope.row.approvalStatus === 1">已审批</span>
                        <span v-else-if="scope.row.approvalStatus === 2">退回重选</span>
                        <span v-else>取消重选</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    :total="totalPage"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </template>
    
    <script>
        export default {
            name: "",
            data() {
                return {
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0,
                    dataListLoading: false,
                    dataForm: {},
                    listData: [],
                    rowList: [],
                    spanArr: [],
                    formLabelWidth: '90px',
                    roleType: 'bumen'  // 角色,是团队负责人还是部门负责人
                }
            },
            methods: {
                // 每页数
                sizeChangeHandle (val) {
                    this.pageSize = val
                    this.pageIndex = 1
                    this.getDataList()
                },
                // 当前页
                currentChangeHandle (val) {
                    this.pageIndex = val
                    this.getDataList()
                },
                // 获取数据列表
                getDataList(){//查询操作
                    this.dataListLoading = true
                    this.$http({
                        url: this.$http.adornUrl('/courseselect/emptraining/getLeaderSelectCourses'),
                        method: 'get',
                        params: this.$http.adornParams({
                            'page': this.pageIndex,
                            'limit': this.pageSize,
                        })
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.listData = data.data.list
                            this.totalPage = data.data.totalCount
                            this.roleType = data.leaderType === 1 ? 'bumen' : 'tuandui'
                            this.rowspan()
                        } else {
                            this.listData = []
                            this.totalPage = 0
                        }
                        this.dataListLoading = false
                    })
                },
    
                rowspan() {
                    this.listData.forEach((item,index) => {
                        if( index === 0){
                            this.spanArr.push(1);
                            this.position = 0;
    
                        }else{
                            if(this.listData[index].type === this.listData[index-1].type ){
                                this.spanArr[this.position] += 1;
                                this.spanArr.push(0);
                            }else{
                                this.spanArr.push(1);
                                this.position = index;
                            }
                        }
                    })
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
                    console.log(this.roleType)
                    if (this.roleType === 'bumen'){
                        if (columnIndex === 0) {
                            const _row = this.spanArr[rowIndex];
                            const _col = _row>0 ? 1 : 0;
                            return {
                                rowspan: _row,
                                colspan: _col
                            }
                        }
                        if(columnIndex === 1){ //合并第三列 内容相同的
                            const _row = this.spanArr[rowIndex];
                            const _col = _row>0 ? 1 : 0;
                            return {
                                rowspan: _row,
                                colspan: _col
                            }
                        }
                    }else {
                        if( columnIndex === 0){ //合并第三列 内容相同的
                            const _row = this.spanArr[rowIndex];
                            const _col = _row>0 ? 1 : 0;
                            return {
                                rowspan: _row,
                                colspan: _col
                            }
                        }
                    }
    
                },
            },
            mounted() {
                this.getDataList();
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    曾遇到的问题:element表格单元格合并时,合并列数据不显示,数据错位。

    原因是,表格的数据还没渲染完,合并的方法就执行了。解决办法:this.rowspan() 一定要放到接口调用成功,表格数据赋值完毕之后在执行。

  • 相关阅读:
    Delphi XE5 android 蓝牙通讯传输
    Delphi XE5 android toast
    Delphi XE5 android openurl(转)
    Delphi XE5 如何设计并使用FireMonkeyStyle(转)
    Delphi XE5 android 捕获几个事件
    Delphi XE5 android listview
    Delphi XE5 android 黑屏的临时解决办法
    Delphi XE5 android popumenu
    Delphi XE5 android 获取网络状态
    Delphi XE5 android 获取电池电量
  • 原文地址:https://www.cnblogs.com/wenrain/p/10456940.html
Copyright © 2011-2022 走看看