element table多选表格_el-table 行列合并

El-Table 是 Element UI 中的一个表格组件，支持行列合并和多选功能。

要实现多选功能，需要在表格中加入 el-table-column 组件，并设置 type 属性为 'selection'。例如：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

其中，tableData 是一个数组，包含了表格中的数据。handleSelectionChange 是一个方法，用于处理用户选择的数据。

要实现行列合并，可以使用 el-table-column 中的 rowspan 和 colspan 属性。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="地址" :rowspan="2">
    <el-table-column prop="province" label="省份" :colspan="2"></el-table-column>
    <el-table-column prop="city" label="市区" :colspan="2"></el-table-column>
  </el-table-column>
</el-table>

在上面的例子中，第三列使用了 rowspan 属性，表示该列占据了两行。同时，该列还包含了两个 el-table-column 组件，每个组件都使用了 colspan 属性，表示该列占据了两列。

注意，使用 rowspan 和 colspan 属性时，要确保表格数据的结构符合要求，否则可能会出现错位或重叠的问题。