关于vue 表格内合并的问题

最新推荐文章于 2024-10-15 15:49:37 发布

代码真想

最新推荐文章于 2024-10-15 15:49:37 发布

阅读量183

点赞数

分类专栏：表格文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/ly479488874/article/details/119970725

版权

表格专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js应用程序中如何处理表格内单元格的合并问题，详细介绍了相关代码实现过程，对于使用Vue进行前端开发的人员来说，是一个关于表格布局和优化的实用指南。

摘要由CSDN通过智能技术生成

关于表格合并
表格代码详情

div class="assess">
                    <div class="title">
                        评估得分详情
                    </div>

                    <div class="assess-table">
                        <el-table v-loading="loading" :data="tableData" border :span-method="objectSpanMethod" style="width: 100%; margin-top: 20px">
                            <el-table-column label="能力域">
                                <el-table-column prop="indicatorTwoName" label="名称">
                                </el-table-column>
                                <el-table-column label="得分" prop="twoScore">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.twoScore" :min="0" :max="9.99" type="number" :disabled="disabled" placeholder="请输入" size="mini" style="width: 70%;" />
                                    </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="能力项">
                                <el-table-column prop="indicatorOneName" label="名称">
                                </el-table-column>
                                <el-table-column label="得分" prop="oneScore">
                                     <template slot-scope="scope">
                                        <el-input v-model="scope.row.oneScore" :min="0" :max="9.99" type="number" :disabled="disabled" placeholder="请输入" size="mini" style="width: 70%;" />
                                    </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="评估指标">
                                <el-table-column prop="indicatorName" label="名称">
                                </el-table-column>
                                <el-table-column label="得分" prop="score">
                                     <template slot-scope="scope">
                                        <el-input v-model="scope.row.score" :min="0" :max="9.99" type="number" :disabled="disabled" placeholder="请输入" size="mini" style="width: 70%;" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdits(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

***匹配我们的方法对接口传来的值进行匹配***
***下面是我们的接口以及其他内容的展示 还有方法***



handlreport() {
    assessmentAeport(this.$route.query.businessKey).then(res => {
            if (res.code === 200) {
                this.tableData = res.data.AssIndicatorScoresVoList;
    alert(1)    
                }
    let data = this.tableData;
    for (let i = 0; i < data.length; i++) {
        if (i === 0) {
            this.spanData.push(1);
            this.pos = 0;
        } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].indicatorTwoId === data[i - 1].indicatorTwoId) {
                this.spanData[this.pos] += 1;
                this.spanData.push(0);
            } else {
                this.spanData.push(1);
                this.pos = i;
            }
        }
    let data2 = this.tableData;
    for (let j = 0; j < data2.length; j++) {
        if (j === 0) {
            this.spanData1.push(1);
            this.pos1 = 0;
        } else {
            // 判断当前元素与上一个元素是否相同
            if (data2[j].indicatorOneId === data2[j - 1].indicatorOneId) {
                console.log(this.spanData1,"894561215648978465164894651354698646");
                this.spanData1[this.pos1] += 1;
                this.spanData1.push(0);
            } else {
                this.spanData1.push(1);
                this.pos1 = j;
            }
        }
    }
                this.loading = false;
            }
        }
    );

},

最后是我们的元素匹配到的方法
 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1 || columnIndex === 0) {
                const _row = this.spanData[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            } else if (columnIndex === 2 || columnIndex === 3) {
                const _row1 = this.spanData1[rowIndex];
                const _col1 = _row1 > 0 ? 1 : 0;
                return {
                    rowspan: _row1,
                    colspan: _col1,
                };
            }
        },


完活！！！！！                  







我要继续去加班了！