Vue实现EasyTable第一列数据按名称相同合并单元格示例

在 Vue 中，你可以使用动态绑定的方式来实现根据名称相同合并单元格的效果。下面是一个示例： ```html <template> <div> <table> <tr v-for="(item, index) in tableData" :key="index"> <td v-if="index === 0 || item.name !== tableData[index - 1].name" :rowspan="rowspan(item)"> {{ item.name }} </td> <td>{{ item.description }}</td> </tr> </table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'A', description: 'Description 1' }, { name: 'A', description: 'Description 2' }, { name: 'B', description: 'Description 3' }, { name: 'B', description: 'Description 4' }, { name: 'B', description: 'Description 5' } ] }; }, methods: { rowspan(item) { let count = 1; for (let i = this.tableData.indexOf(item) + 1; i < this.tableData.length; i++) { if (this.tableData[i].name === item.name) { count++; } else { break; } } return count; } } }; </script> ``` 在上面的示例中，`tableData` 是一个数组，包含了表格的数据。在 `<td>` 元素上使用 `v-if` 条件判断，如果是第一行或当前行的名称与上一行的名称不相同，才会显示名称并设置 `rowspan` 属性。 通过 `rowspan()` 方法计算当前名称的连续行数，然后返回给 `:rowspan` 属性。 这样，相同名称的单元格会自动合并。 ######[AI写代码神器 | 1217点数解答 | 2024-03-12 09:34:34]