el-table 展开行要点击两次才能展开
时间: 2023-11-24 17:48:09 浏览: 186
el-table 展开行需要点击两次才能展开的原因可能是因为你的代码中没有正确绑定展开行的事件。一般来说,展开行需要绑定 click 事件,并且在事件处理函数中修改展开行的状态。如果你的代码中只是简单地绑定了 click 事件,但没有修改展开行的状态,那么就需要点击两次才能展开。
以下是一个简单的示例代码,你可以参考一下:
```
<template>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<<el-table-column type="expand">
<template slot-scope="props">
<p>性别:{{ props.row.gender }}</p>
<p>地址:{{ props.row.address }}</p>
</template>
</el-table-column>>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男', address: '北京市海淀区' },
{ name: '李四', age: 20, gender: '女', address: '上海市浦东新区' },
{ name: '王五', age: 22, gender: '男', address: '广州市天河区' }
]
}
},
methods: {
handleRowClick(row, column, event) {
// 判断当前行是否已经展开
if (row.expanded) {
// 如果已经展开,则将展开状态设置为 false
row.expanded = false
} else {
// 如果未展开,则将展开状态设置为 true
row.expanded = true
}
}
}
}
</script>
```
在上面的代码中,我们通过 @row-click 绑定了展开行的点击事件,并在事件处理函数 handleRowClick 中修改了展开行的状态。这样就可以实现点击一次展开行的效果了。
阅读全文