html代码:el-table中添加prop="Nosort"

<el-table border :header-cell-style="{background: '#fafafa'}"
          :data="list" height="a"
          highlight-current-row style="flex:1;width:100%;"
          :span-method="objectSpanMethod" >
    <el-table-column  prop="Nosort" width="100"   fixed="left"></el-table-column>
    <el-table-column prop="typeName" label="阶段" ></el-table-column>
    <el-table-column prop="userName" label="姓名" ></el-table-column>
</el-table>

在获取:data的方法中进行合并,并对合并后的list添加Nosort,主要方法是this.getSpanArr(this.list);

 // 表格序号
    let Nosort = 0;
    for(let n in this.spanList){
        if(this.spanList[n]>0){
            Nosort += 1;
            this.$set(this.list[n],'Nosort',Nosort) // this.list为最后展示的数组
        }
    }

getTypeAndUserByHalfYear(param){
    getTypeAndUserByHalfYear(param).then(
        (resp)=>{
            this.list = resp.body;
            for (let i = 0; i < this.list.length; i++){
                let typeName = this.judgeType(this.list[i].type);
                this.list[i].typeName = typeName;
            }
            this.getSpanArr(this.list);
        }
    ).catch(
        (resp)=>{
            this.$message.error("统计出错!")
        }
    )
},

getSpanArr(data) {
    this.spanList = [];
    for (let i = 0; i < data.length; i++) {
        if (i === 0) {
            this.spanList.push(1);
            this.pos = 0
        } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].typeName === data[i - 1].typeName) {
                this.spanList[this.pos] += 1;
                this.spanList.push(0);
            } else {
                this.spanList.push(1);
                this.pos = i;
            }
        }
    }
    // 表格序号
    let Nosort = 0;
    for(let n in this.spanList){
        if(this.spanList[n]>0){
            Nosort += 1;
            this.$set(this.list[n],'Nosort',Nosort) // this.list为最后展示的数组
        }
    }
},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if(this.list.length>0 ){
        if(columnIndex === 0 || columnIndex === 1){
            const _row = this.spanList[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        }
    }
},

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐