【vue】使用el-button实现点击按钮 按钮是选中状态列表内容进行切换

vue 不使用el-tab而是使用el-button实现点击按钮 按钮是选中状态列表内容进行切换
例子如下:

注意第一个el-button有id 意即这个button是默认选中的

全部文档 公开文档 站端可看文档 网省可看文档
checkByDocAuthority(type) { //去除点击样式 //如果有默认选中的按钮 let buttons = document.getElementById("zls-button-active"); //去除id if (buttons) { buttons.id = ""; } switch (type) { case "all": //全部 this.searchForm.docAuthorityInteger = ""; break; case "open": //公开 this.searchForm.docAuthorityInteger = String(this.statusMap.OPEN); break; case "web": //站端可看 this.searchForm.docAuthorityInteger = String(this.statusMap.WEB); break; case "province": //网省可看 this.searchForm.docAuthorityInteger = String(this.statusMap.PROVINCE); break; } this.searchForm.pageNum = 1; this.searchForm.pageSize = 10; //获取当前触发该方法的dom元素 let target = event.currentTarget; //添加按钮点击样式 target.id = "zls-button-active"; this.getList(); },

你可能感兴趣的:(vue开发实践总结,vue.js,javascript,前端)