关于一个element table合并列的技术需求疑问？

Question

我想合并三个圈出来的地方，
后端返回的数据结构是2个，我把它扁平化成4个了并且绑定了，现在想合并单元格，但是猪脑不够用了，而且拆了之后它那个switch怎么绑定回父级的row也没想好。有没有巨佬帮一下我，非常感谢

<template>
    <el-table :data="flattenedData" :span-method="objectSpanMethod" border>
        <el-table-column type="selection" align="center" :reserve-selection="true" fixed width="50">
        </el-table-column>
        <el-table-column prop="name" label="商品信息" width="200">
            <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="agency.name" label="适用机构" width="120">
            <template slot-scope="scope">
                <span>{{ scope.row.agency.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="分佣比例" align="center" prop="agency.marketPrice" />
        <el-table-column label="是否首页推荐" align="center" min-width="80">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.bili" active-value="1" inactive-value="0"></el-switch>

            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            rawData: [
                {   
                    id:1,
                    name: '入职体检A',
                    bili: 1,
                    agencies: [
                        {
                            name: '博爱医院',
                            marketPrice: 100.00,
                            costPrice: 30.00,
                            platformPrice: 80.00,
                            totalProfit: 120.00,
                            platformShare: 80,
                            platformProfit: 72.00,
                            businessShare: 20,
                            businessProfit: 18.00,
                            rowspan: 3
                        },
                        {
                            name: '天美体检',
                            marketPrice: 200.00,
                            costPrice: 40.00,
                            platformPrice: 150.00,
                            totalProfit: 110.00,
                            platformShare: 80,
                            platformProfit: 72.00,
                            businessShare: 20,
                            businessProfit: 18.00,
                            rowspan: 0
                        },
                        {
                            name: '美年体检',
                            marketPrice: 300.00,
                            costPrice: 50.00,
                            platformPrice: 100.00,
                            totalProfit: 100.00,
                            platformShare: 80,
                            platformProfit: 72.00,
                            businessShare: 20,
                            businessProfit: 18.00,
                            rowspan: 0
                        }
                    ]
                },
                {
                    id:2,
                    name: '入职体检B',
                    bili: 0,
                    agencies: [
                        {
                            name: '博爱医院',
                            marketPrice: 200.00,
                            costPrice: 100.00,
                            platformPrice: 150.00,
                            totalProfit: 90.00,
                            platformShare: 80,
                            platformProfit: 72.00,
                            businessShare: 20,
                            businessProfit: 18.00,
                            rowspan: 1
                        }
                    ]
                }
            ],
            flattenedData: []
        };
    },
    created() {
        this.flattenData();
    },
    methods: {
        flattenData() {
            this.flattenedData = [];
            this.rawData.forEach(product => {
                product.agencies.forEach(agency => {
                    this.flattenedData.push({
                        name: product.name,
                        agency: agency,
                        bili: product.bili
                    });
                });
            });
            console.log(this.flattenedData)
        }
    }
};
</script>

<style scoped>
.el-table .cell {
    display: flex;
    align-items: center;
}
</style>

Answer 1

不要合并单元格，就一行写，有多个子项的时候自己模拟单元格下边框

Answer 2

试试这个

<template>
  <el-table :data="flattenedData" :span-method="spanMethod" border>
    <el-table-column
      type="selection"
      align="center"
      :reserve-selection="true"
      fixed
      width="50"
    >
    </el-table-column>
    <el-table-column prop="name" label="商品信息" width="200">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="agency.name" label="适用机构" width="120">
      <template slot-scope="scope">
        <span>{{ scope.row.agency.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="分佣比例"
      align="center"
      prop="agency.marketPrice"
    />
    <el-table-column label="是否首页推荐" align="center" min-width="80">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.bili"
          active-value="1"
          inactive-value="0"
           @change="handleSwitchChange(scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      rawData: [
        {
          id: 1,
          name: "入职体检A",
          bili: 1,
          agencies: [
            {
              name: "博爱医院",
              marketPrice: 100.0,
              costPrice: 30.0,
              platformPrice: 80.0,
              totalProfit: 120.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 3,
            },
            {
              name: "天美体检",
              marketPrice: 200.0,
              costPrice: 40.0,
              platformPrice: 150.0,
              totalProfit: 110.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 0,
            },
            {
              name: "美年体检",
              marketPrice: 300.0,
              costPrice: 50.0,
              platformPrice: 100.0,
              totalProfit: 100.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 0,
            },
          ],
        },
        {
          id: 2,
          name: "入职体检B",
          bili: 0,
          agencies: [
            {
              name: "博爱医院",
              marketPrice: 200.0,
              costPrice: 100.0,
              platformPrice: 150.0,
              totalProfit: 90.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 1,
            },
          ],
        },
      ],
      flattenedData: [],
    };
  },
  created() {
    this.flattenData();
  },
  methods: {
    flattenData() {
      this.flattenedData = [];
      this.rawData.forEach((product) => {
        product.agencies.forEach((agency) => {
          this.flattenedData.push({
            name: product.name,
            agency: agency,
            bili: product.bili,
          });
        });
      });
      console.log(this.flattenedData);
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
        //列数index
      if (columnIndex === 0) {
        if (rowIndex > 0 && row.name === this.flattenedData[rowIndex - 1].name) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
        const rowspan = this.flattenedData.filter(
          (item) => item.name === row.name
        ).length;
        return {
          rowspan,
          colspan: 1,
        };
      }
      if (columnIndex === 1) {
        if (rowIndex > 0 && row.name === this.flattenedData[rowIndex - 1].name) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
        const rowspan = this.flattenedData.filter(
          (item) => item.name === row.name
        ).length;
        return {
          rowspan,
          colspan: 1,
        };
      }
      if (columnIndex === 4) {
        if (rowIndex > 0 && row.name === this.flattenedData[rowIndex - 1].name) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
        const rowspan = this.flattenedData.filter(
          (item) => item.name === row.name
        ).length;
        return {
          rowspan,
          colspan: 1,
        };
      }
    },
    handleSwitchChange(row){
        console.log(row);
    },
  },
};
</script>

Answer 3

效果

思路

既然你数据都做了合并处理，就按你数据整。你页面跟你数据字段还不一样agency跟agencies能一样么，太坑了。大致思路就是循环展示，“适用机构”与“分佣比例”其实就是一个for循环。最后推荐scope.row.bili没毛病，需要一个@change接受触发事件，给后台。

重点

兄弟你那个bili一定给个字符串型。你页面是字符串，数据是Number型。Json能用字符串一律用字符串，除非是前端需要计算金额才用number型，其他仅仅展示一律字符串。

代码

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @select-all="handleSelectionChange"
      @select="selectChange"
    >
      <el-table-column
        type="selection"
        align="center"
        :reserve-selection="true"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="name" label="商品信息" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="agencies.name" label="适用机构" width="120">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.agencies" :key="index"
            >{{ item.name }} <br
          /></span>
        </template>
      </el-table-column>

      <el-table-column
        label="分佣比例"
        align="center"
        prop="agencies.marketPrice"
      >
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.agencies" :key="index"
            >{{ item.marketPrice }} <br
          /></span>
        </template>
      </el-table-column>

      <el-table-column label="是否首页推荐" align="center" min-width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.bili"
            active-value="1"
            inactive-value="0"
            @change="handleBili(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "入职体检A",
          bili: "1",
          agencies: [
            {
              name: "博爱医院",
              marketPrice: 100.0,
              costPrice: 30.0,
              platformPrice: 80.0,
              totalProfit: 120.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 3,
            },
            {
              name: "天美体检",
              marketPrice: 200.0,
              costPrice: 40.0,
              platformPrice: 150.0,
              totalProfit: 110.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 0,
            },
            {
              name: "美年体检",
              marketPrice: 300.0,
              costPrice: 50.0,
              platformPrice: 100.0,
              totalProfit: 100.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 0,
            },
          ],
        },
        {
          id: 2,
          name: "入职体检B",
          bili: "0",
          agencies: [
            {
              name: "博爱医院",
              marketPrice: 200.0,
              costPrice: 100.0,
              platformPrice: 150.0,
              totalProfit: 90.0,
              platformShare: 80,
              platformProfit: 72.0,
              businessShare: 20,
              businessProfit: 18.0,
              rowspan: 1,
            },
          ],
        },
      ],
    };
  },

  created() {},

  methods: {
    handleSelectionChange(val) {
      console.log(val);
    },

    selectChange(val) {
      console.log(val);
    },

    handleBili(val) {
      console.log(val.name, val.bili);
    },
  },
};
</script>