vue项目 el-table 多列合并
时间: 2023-10-06 22:12:33 浏览: 204
vue单元格多列合并的实现
抱歉,我可以帮助你解决vue项目中el-table多列合并的问题。您可以使用column-spanner属性来实现多列合并。例如:
```
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<el-table-column label="Other">
<template slot-scope="scope">
<span v-if="scope.row.name === 'John' && scope.row.age === 20">John 20 years old</span>
<span v-if="scope.row.name === 'Jack' && scope.row.age === 24">Jack 24 years old</span>
<span v-if="scope.row.name === 'Steve' && scope.row.age === 30">Steve 30 years old</span>
</template>
</el-table-column>
<el-table-column label="Column Group">
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="amount" label="Amount"></el-table-column>
</el-table-column>
</el-table>
```
在上面的示例中,`<el-table-column label="Column Group">`包含两个子列`<el-table-column prop="date" label="Date"></el-table-column>`和`<el-table-column prop="amount" label="Amount"></el-table-column>`,这两个子列将被合并并显示在"Column Group"列下。
阅读全文