使用vue和element实现一个绑定按钮,点击这个绑定按钮后在下方出现一个按钮组,按钮组包含两个按钮分别为单个绑定和批量绑定
时间: 2024-05-12 14:20:56 浏览: 19
代码如下:
```
<template>
<div>
<el-button type="primary" @click="showBindBtns">绑定</el-button>
<el-button-group v-show="showBtnGroup">
<el-button type="primary" @click="bindSingle">单个绑定</el-button>
<el-button type="primary" @click="bindBatch">批量绑定</el-button>
</el-button-group>
</div>
</template>
<script>
export default {
data() {
return {
showBtnGroup: false
}
},
methods: {
showBindBtns() {
this.showBtnGroup = true
},
bindSingle() {
// 单个绑定逻辑
},
bindBatch() {
// 批量绑定逻辑
}
}
}
</script>
```
其中,`showBindBtns`方法用于控制`showBtnGroup`的显示与隐藏,`bindSingle`和`bindBatch`分别对应单个绑定和批量绑定的逻辑。在按钮组中使用`v-show`指令来根据`showBtnGroup`的值来控制其显示与隐藏。这样,当点击绑定按钮时,按钮组会出现,用户可以选择单个绑定或批量绑定。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)