使用element-ui 的el-table组件写一个合并第一列的代码

可以使用element-ui的`<el-table>`组件中的`<el-table-column>`的`scopedSlots`属性和`<template>`标签实现合并第一列的效果。具体实现步骤如下：

1. 在`<el-table>`中添加`<el-table-column>`，设置`prop`属性为第一列的数据字段，例如`prop="name"`。

2. 在`<el-table-column>`中添加`<template>`标签，设置`slot-scope`属性为`{row, $index}`。

3. 在`<template>`标签中添加`<div>`标签，在其中添加判断逻辑，如果是第一行，则设置`rowspan`属性为总行数，否则设置`display: none`。

完整代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名">
      <template slot-scope="{row, $index}">
        <div v-if="$index === 0" :rowspan="tableData.length">{{row.name}}</div>
        <div v-else style="display: none">{{row.name}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市'
        },
        {
          name: '李四',
          age: 20,
          address: '上海市'
        },
        {
          name: '王五',
          age: 22,
          address: '广州市'
        }
      ]
    }
  }
}
</script>

在上面的代码中，我们将第一列的`prop`属性设置为`name`，然后在`<template>`标签中设置了判断逻辑，如果是第一行，则设置`rowspan`属性为总行数，否则设置`display: none`。这样就可以实现合并第一列的效果。