已知可以从后端获得数据 写一个展开行代码 用name做验证 确保点开展开行后只显示有关name的信息 写出elementplus和vue代码
时间: 2024-06-02 08:13:37 浏览: 38
Element Plus代码:
<template>
<el-table :data="tableData" @expand-change="handleExpand">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
<template v-slot:expand="{ row }">
<el-card v-if="row.name === currentName">
<p>Age: {{ row.age }}</p>
<p>Gender: {{ row.gender }}</p>
</el-card>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Jane', age: 30, gender: 'Female' },
{ name: 'Bob', age: 22, gender: 'Male' },
],
currentName: '',
}
},
methods: {
handleExpand(row, expanded) {
if (expanded) {
this.currentName = row.name
} else {
this.currentName = ''
}
},
},
}
</script>
Vue代码:
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData" :key="row.name">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>{{ row.gender }}</td>
<td>
<button @click="toggleExpand(row.name)">Expand</button>
</td>
</tr>
<tr v-if="expandedRow">
<td colspan="3">
<div v-if="expandedRow.name === currentName">
<p>Age: {{ expandedRow.age }}</p>
<p>Gender: {{ expandedRow.gender }}</p>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Jane', age: 30, gender: 'Female' },
{ name: 'Bob', age: 22, gender: 'Male' },
],
expandedRow: null,
currentName: '',
}
},
methods: {
toggleExpand(name) {
if (this.currentName === name) {
this.currentName = ''
} else {
this.currentName = name
}
},
},
computed: {
expandedRowIndex() {
if (!this.expandedRow) return -1
return this.tableData.findIndex(row => row.name === this.expandedRow.name)
},
},
watch: {
currentName: {
handler(name) {
if (name) {
this.expandedRow = this.tableData.find(row => row.name === name)
} else {
this.expandedRow = null
}
},
},
},
}
</script>