arr:[name:‘张三’,addressList:[{age:10,gendra:'男'},{age:10,gendra:'男'}]],el-table表头一行,二维数组拆分多行展示
时间: 2024-02-16 12:03:39 浏览: 79
list 多行表头
您可以使用 `el-table` 的 `span-method` 属性来实现表头一行拆分多行展示。具体实现如下:
1. 在 `el-table` 中加入 `span-method` 属性,值为一个函数,该函数接收两个参数:`{ row, column, rowIndex, columnIndex }`,分别表示当前单元格所在的行、列、行索引、列索引。
2. 在函数内部判断当前单元格是否为第一行,如果是则返回该列需要占用的行数,否则返回 0。
3. 在表头的第一行中,将需要拆分的单元格使用 `rowspan` 属性进行合并,`rowspan` 的值为该列需要占用的行数。
4. 在表头的第二行及以下行中,将需要拆分的单元格进行分开展示,每一行只展示一部分内容。
具体代码实现如下:
```html
<template>
<el-table :data="arr" :span-method="handleSpanMethod">
<el-table-column prop="name" label="姓名" rowspan="2"></el-table-column>
<el-table-column label="地址" colspan="2"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="备注"></el-table-column>
<el-table-column label="操作"></el-table-column>
<el-table-column prop="addressList" label="地址信息" v-for="(item, index) in arr[0].addressList" :key="index">
<template slot-scope="scope">
<span v-if="scope.rowIndex === 0">{{ item.age }}岁{{ item.gender }}</span>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
arr: [
{ name: '张三', addressList: [{ age: 10, gender: '男' }, { age: 10, gender: '男' }] },
{ name: '李四', addressList: [{ age: 20, gender: '女' }, { age: 20, gender: '女' }] }
]
}
},
methods: {
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && (columnIndex === 1 || columnIndex === 2)) {
return { rowspan: 2, colspan: 1 }
} else {
return { rowspan: 1, colspan: 1 }
}
}
}
}
</script>
```
在上述代码中,我们使用 `handleSpanMethod` 方法来处理表头的拆分展示。在该方法中,我们判断当前单元格是否为第一行中需要拆分展示的单元格,如果是则返回该列需要占用的行数为 2,否则返回占用行数为 1。
在表头中,我们使用 `rowspan` 属性将需要拆分展示的单元格进行合并,同时在第二行及以下行中,我们使用 `v-if` 来判断当前单元格是否为第一行中需要拆分展示的单元格,如果是则展示该单元格的内容,否则展示 `-`。
阅读全文