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

在Vue中，你可以使用`v-for`指令循环遍历数据，并使用条件判断合并单元格。以下是一个简单的示例： ```html <template> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <template v-for="(item, index) in data" :key="index"> <tr v-if="index === || item.name !== data[index - 1].name"> <td :rowspan="getRowCount(item.name)">{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.country }}</td> </tr> <tr v-else> <td>{{ item.age }}</td> <td>{{ item.country }}</td> </tr> </template> </tbody> </table> </template> <script> export default { data() { return { data: [ { name: 'John', age: 25, country: 'USA' }, { name: 'John', age: 30, country: 'Canada' }, { name: 'Mary', age: 28, country: 'USA' }, { name: 'Mary', age: 35, country: 'Canada' }, ] }; }, methods: { getRowCount(name) { return this.data.filter(item => item.name === name).length; }, }, }; </script> ``` 在这个示例中，通过判断每一行数据的名称是否与前一行相同来决定是否需要合并单元格。如果名称相同，则只显示"Age"和"Country"列，而"Name"列的`rowspan`属性被设置为合并的行数。`getRowCount`方法用于计算每个名称对应的行数。请将示例中的`data`替换为你自己的数据。 ######[AI写代码神器 | 1231点数解答 | 2024-03-12 16:36:16]