使用element-ui实现行合并过程

下面是使用element-ui实现行合并过程的完整攻略：

1. 使用el-table中的slot-scope来实现行合并

Element UI中的el-table组件支持使用slot-scope来自定义表格的各种元素，例如：表头、表格行、单元格等。结合使用v-if指令、v-for指令和javascript语句，我们可以很容易地实现行合并的功能。

下面是一个实现行合并的示例代码：

<template>
  <el-table :data="tableData" border>
    <el-table-column label="日期" prop="date"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="地址" prop="address"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{row}" v-if="row.rowspan !== undefined">
        <span @click="handleMerge(row)">合并行</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2019-06-05',
        name: '张三',
        address: '广州市天河区',
        rowspan: 2
      }, {
        date: '2019-06-05',
        name: '李四',
        address: '广州市天河区'
      }, {
        date: '2019-06-06',
        name: '王五',
        address: '广州市海珠区',
        rowspan: 3
      }, {
        date: '2019-06-06',
        name: '赵六',
        address: '广州市海珠区'
      }, {
        date: '2019-06-06',
        name: '张七',
        address: '广州市海珠区'
      }]
    };
  },
  methods: {
    handleMerge(row) {
      let index = this.tableData.indexOf(row);
      let rowspan = row.rowspan;
      for (let i = 1; i < rowspan; i++) {
        this.tableData[index + i].show = false;
      }
      row.rowspan = undefined;
    }
  }
};
</script>

在这个示例中，我们使用了tableData数组来存储表格的数据，其中有一些行拥有合并行数的属性rowspan，并且在最后一列中使用了slot-scope来判断该行是否需要显示“合并行”按钮。在点击“合并行”按钮后，我们通过修改对应行的show属性，来实现行的合并。

2. 使用render函数来实现行合并

除了使用slot-scope来实现行合并，我们还可以使用Element UI中提供的render函数来自定义表格的渲染方式。和使用slot-scope相同，我们在render函数中也可以使用javascript语句来实现行合并的功能。

下面是一个实现行合并的示例代码：

<template>
  <el-table :data="tableData" border :show-header="false">
    <el-table-column label="姓名">
      <template slot-scope="{ row }">
        { row.name }
      </template>
    </el-table-column>
    <el-table-column label="年龄">
      <template slot-scope="{ row }">
        { row.age }
      </template>
    </el-table-column>
    <el-table-column label="性别">
      <template slot-scope="{ row }">
        { row.gender }
      </template>
    </el-table-column>
    <el-table-column label="合并">
      <template slot-scope="{ row }">
        <el-button
          v-if="row.rowspan !== undefined"
          type="primary"
          size="mini"
          @click="handleMerge(row)">
          合并行
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
          name: '张三',
          age: 18,
          gender: '男',
          rowspan: 2
        },
        {
          name: '李四',
          age: 22,
          gender: '女'
        },
        {
          name: '王五',
          age: 28,
          gender: '男',
          rowspan: 3
        },
        {
          name: '赵六',
          age: 20,
          gender: '女'
        },
        {
          name: '张七',
          age: 25,
          gender: '男'
        }]
    };
  },
  methods: {
    handleMerge(row) {
      let index = this.tableData.indexOf(row);
      let rowspan = row.rowspan;
      for (let i = 1; i < rowspan; i++) {
        this.tableData[index + i].show = false;
      }
      row.rowspan = undefined;
    }
  },
  render(h) {
    let renderRowspan = function(text, row, column, index) {
      if (row.rowspan !== undefined) {
        let rowspan = row.rowspan;
        let isShow = row.show !== false;
        if (index === 0) {
          return {
            text,
            rowspan,
            show: isShow
          };
        } else if (index > 0 && isShow) {
          return {
            text: '',
            rowspan: 0,
            show: false
          };
        }
      } else {
        return text;
      }
    };
    return (
      <el-table-column
        label="姓名"
        prop="name"
        scopedSlots={{ default: ({ row, column, text, index }) => renderRowspan(text, row, column, index) }}
      />
    );
  }
};
</script>

在这个示例中，我们使用了render函数来重写了<el-table-column>的props属性，自定义表格的渲染方式。最后一列中也使用了javascript语句来判断出需要显示的行，以及在合并行的时候如何修改行数等信息。

以上是使用Element UI实现行合并的两种方式示例说明。需要注意的是，在实现行合并的过程中需要注意表格中数据的结构和渲染方式，具体实现方式会因项目需求而异，以上示例仅供参考。