首页vue项目 el-table 多列合并

vue项目 el-table 多列合并

时间: 2023-10-06 21:12:33 浏览: 208

vue单元格多列合并的实现

一.多列合并 1.在el-table中添加:span-method=objectSpanMethod属性来控制合并单元格，如下图 2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样导致错误的问题 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.myObj[row.channel_type].start === rowIndex) { return { rowspan: this.

抱歉，我可以帮助你解决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"列下。

阅读全文