element-ui如何实现点击按钮同时出现左右两个表单,一个用来查看,一个用来修改
时间: 2024-05-04 18:18:21 浏览: 13
要实现这个功能,你可以在页面上放置两个表单,一个用于查看,一个用于编辑。当点击编辑按钮时,隐藏查看表单,显示编辑表单。
具体的实现方法如下:
1. 在页面上放置两个表单,并使用 CSS 将它们分别定位到左右两侧。
2. 给编辑按钮绑定点击事件,在事件处理函数中使用 JavaScript 或 jQuery 修改对应表单的样式,以实现显示和隐藏的效果。
示例代码如下:
HTML 代码:
```
<div class="container">
<div class="left-form">
<!-- 左侧表单 -->
<!-- ... -->
</div>
<div class="right-form">
<!-- 右侧表单 -->
<!-- ... -->
</div>
<button id="edit-btn">编辑</button>
</div>
```
CSS 代码:
```
.container {
position: relative;
}
.left-form {
position: absolute;
left: 0;
top: 0;
}
.right-form {
position: absolute;
right: 0;
top: 0;
display: none;
}
```
JavaScript 代码:
```
var editBtn = document.getElementById('edit-btn');
var leftForm = document.querySelector('.left-form');
var rightForm = document.querySelector('.right-form');
editBtn.addEventListener('click', function() {
if (rightForm.style.display === 'none') {
// 当前为查看状态,切换到编辑状态
leftForm.style.display = 'none';
rightForm.style.display = 'block';
} else {
// 当前为编辑状态,切换到查看状态
leftForm.style.display = 'block';
rightForm.style.display = 'none';
}
});
```