vue之elementui等表格单元格列合并

在Vue中使用Element UI时，可以通过colspan和rowspan属性来实现表格的列合并。以下是一个简单的例子，展示了如何在Element UI的表格中合并列：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column label="配送信息" colspan="3">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column label="地址" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.address"></el-input>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

在这个例子中，我们有一个包含日期和配送信息的表格。配送信息列由姓名和地址两部分组成，我们使用colspan属性将这两列合并为一个更宽的列。地址列使用了el-input组件来允许用户直接编辑地址信息。