elementui如何将一张学生表按照性别分为两张表
时间: 2024-05-05 11:17:19 浏览: 32
您可以使用elementui的Table组件,并使用computed计算属性来将学生表按性别分为两张表。
首先,在data中定义学生表的数据:
```javascript
data() {
return {
students: [
{ name: '张三', gender: '男', age: 18 },
{ name: '李四', gender: '男', age: 19 },
{ name: '王五', gender: '女', age: 20 },
{ name: '赵六', gender: '女', age: 21 }
]
}
}
```
然后,使用computed计算属性将学生表按性别分为两张表:
```javascript
computed: {
maleStudents() {
return this.students.filter(student => student.gender === '男');
},
femaleStudents() {
return this.students.filter(student => student.gender === '女');
}
}
```
最后,在template中使用两个Table组件分别展示男生表和女生表:
```html
<el-table :data="maleStudents">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-table :data="femaleStudents">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
这样就可以将学生表按性别分为两张表展示了。
阅读全文