table合并单元格-蒲公英云

table合并单元格

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70

遇到这种设计，记录一下

<el-table
      :data="tableDataNew"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="address"
        label="产地">
      </el-table-column>
    </el-table>
<script>
  export default {
    data() {
      return {
        tableDataNew:[],
        tableData: [{
          id: '12987122',
          name: '王小虎1',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
          children:[
            {
              address:'上海',
              productName:'苹果',
              price:'12.00'
            }, {
              address:'上海',
              productName:'苹果',
              price:'13.00'
            },
             {
              address:'上海',
              productName:'苹果',
              price:'15.00'
            }
          ]
        }, {
          id: '12987124',
          name: '王小虎2',
          amount1: '324',
          amount2: '1.9',
          amount3: 9,
          children:[
            {
              address:'上海',
              productName:'苹果',
              price:'12.00'
            },
             {
              address:'上海',
              productName:'苹果',
              price:'12.00'
            }
          ]
        }, {
          id: '12987125',
          name: '王小虎3',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
         children:[
            {
              address:'上海',
              productName:'苹果',
              price:'12.00'
            }, {
              address:'上海',
              productName:'苹果',
              price:'13.00'
            },
             {
              address:'上海',
              productName:'苹果',
              price:'15.00'
            }
          ]
        }, {
          id: '12987126',
          name: '王小虎4',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
          children:[
            {
              address:'上海',
              productName:'苹果',
              price:'12.00'
            }, {
              address:'上海',
              productName:'苹果',
              price:'13.00'
            },
             {
              address:'上海',
              productName:'苹果',
              price:'15.00'
            }
          ]
        }]
      };
    },
    mounted() {
      this.dataFilter()
    },
    methods: {
      dataFilter() {
          // 主要是数据符合table的要求，用foreach for 循环都可，两层循环，把数组扁平化，提供一个思路
        this.tableDataNew =[]
        console.log('thisdate',this.tableData)
        for (let j=0; j<this.tableData.length; j++) {
          console.log('this.tableData.length',this.tableData.length)
             console.log('this.tableData[j].children.length',this.tableData[j].children)
          if(this.tableData[j].children === undefined || this.tableData[j].children === 'undefined') {
             this.tableDataNew.push({...{
                  id: this.tableData[j].id,
                  name:  this.tableData[j].name,
                  amount1: this.tableData[j].amount1,
                  amount2: this.tableData[j].amount2,
                  }})
           console.log('结果',this.tableDataNew)
          } else {
            for (let i = 0;i < this.tableData[j].children.length; i++) {
              console.log('this.tableData[j].children.length',this.tableData[j].children.length)
                this.tableDataNew = this.tableDataNew.concat({...this.tableData[j].children[i],...{
                  id: this.tableData[j].id,
                  name:  this.tableData[j].name,
                  amount1: this.tableData[j].amount1,
                  amount2: this.tableData[j].amount2,
                  length: this.tableData[j].children.length,
                  istarget: i ===0 || i === this.tableData[j].children.length+1? true :false // 记录合并单元格位置
                }})
            }
         }
        }
         console.log('新数据', this.tableDataNew)
      },
      // 合并单元格
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex < 4) {
              if(row.istarget) {
                return {
                  rowspan: row.length,
                  colspan: 1
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
               };
          }
        }
        console.log('row.istarget', row.istarget )
      }
    }
  };
</script>