vue+element ui table 合并列

Posted 2023-04-28

参考技术A <el-table :data=" dataDetailsList "  :span-method="objectSpanMethod"   :row-class-name="tableRowClassName" >

            <el-table-column prop=" photo_group_name " label="照片组名称"></el-table-column>

            <el-table-column prop="title" label="文件名称"></el-table-column>

</el-table>

js:

data()

return

            position: 0,

            rowSpanArr: [],

    



        methods:

         // 获取合并的数组

     getRowSpan()  

      this.rowSpanArr = [];

      this.dataDetailsList.forEach((item, index) => 

        if (index == 0) 

          this.rowSpanArr.push(1);

          this.position = 0;

         else 

          if (this. dataDetailsList[index].photo_group_name  == this. dataDetailsList[index - 1].photo_group_name ) 

            this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中

            this.rowSpanArr.push(0);

            this.dataDetailsList[index].photo_group_name = this.dataDetailsList[index - 1].photo_group_name;

           else 

            this.rowSpanArr.push(1);

            this.position = index;

          

        

      );

    ,

     objectSpanMethod ( row, column, rowIndex, columnIndex ) 

      // 只合并区域位置

      if (columnIndex === 0) 

        const _row = this.rowSpanArr[rowIndex];

        return 

          rowspan: _row, //行

          colspan: 1 //列

        ;

      

    ,

 queryExcelDetails()

              queryExcelDetails(this.queryData).then(res => 

                  if (res.code == 200) 

                    this.tableData = [];

                    this.dataDetailsList = [];

                    this.dataDetailsList = res.data.list;

                    this.queryData.total = res.data.total;

                    this.dataDetails = true;

                    this. getRowSpan();

                  else

                    this.$message.error(

                      showClose: true,

                      message: res.message

                    );

                  

                );

            ,

vue elementUI Table给动态列动态设置宽度

参考技术A element UI中的table设置列的宽度是width属性

<el-table-column prop="date" label="日期"  width="180"> </el-table-column>

但是我的列是动态的，不能直接这样设置。

解决：