element table 中使用合并列 解决 span-method 无法合并的问题

官方实例

<template>
  <div>
    <el-table
      :data="tableData"
      :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="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

很显然在工作过程中并不实用，我们需要的不仅仅是简单的固定行合并，而是不定数目的合并，在工作中就不能正常使用了。我们正常工作中需要的是类似这样的列表。

解决办法

先添加所需依赖在src/components目录中找到lb-table，复制到自己的项目中，然后引用，可以根据自己的需求自由更改。
1、在所需模块中引入 @/assets/lb-table/lb-table
2、components 中添加对应引入模块
3、column 表头
4、merge 需要进行合并的column中的prop，可以是多个

//template 中
<lb-table
    :column="column"
    :data="tableData"
    :merge="['cinema_name']"
    :row-class-name="rowClassName"
>
</lb-table>
//script 中
import lbTable from '@/assets/lb-table/lb-table';
export default {
        name: 'networkList',
        components:{
            lbTable
        },
        data(){
            return {
                column: [
                    {
                        prop: 'cinema_name',
                        label: '名称',
                    },
                    {
                        prop: 'device_model',
                        label: '类型',
                    },
                    {
                        prop: 'collect_name',
                        label: '描述',
                        render: (h, scope) => {
                            if(scope.row.type===3){
                                return(
                                    <div>
                                        <i style="color:#2DBC2D;zoom:0.6" class="iconfont icon-fangxing"></i>
                                        { scope.row.collect_name }
                                    </div>
                                )
                            }else{
                                return(
                                        <div>
                                            <i style="color:red;zoom:0.6" class="iconfont icon-fangxing"></i>
                                            { scope.row.collect_name }
                                        </div>
                                    )

                            }

                        }
                    },
                    {
                        label: '操作',
                        prop: 'cinema_name',
                        width:'120',
                        fixed:"right",
                        render:(h, scope)=>{
                            return(
                                <div>
                                    <el-button style="padding:0" onClick={()=>{this.handleClick('contact',scope.row)}} type="text" size="small">
                                        xxxx
                                    </el-button>
                                </div>
                            )
                        }
                    }
                ],
                tableData: [],
            }
        },
        methods:{
            rowClassName ({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row'
                } else if (rowIndex === 3) {
                    return 'success-row'
                }
                return ''
            },
            onSubmit(){
                const that = this;
                getFaults().then(res =>{
                    console.log(res);
                    if(res.return_code===0){
                        that.tableData = res.data.data;
                    }
                })
            },

        }
    }