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

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

注意第一个el-button有id 意即这个button是默认选中的
<div class="zls-page-title"> <el-button type="primary" plain
id="zls-button-active" @click="checkByDocAuthority('all')" >全部文档</el-button >
<el-button type="primary" plain @click="checkByDocAuthority('open')"
>公开文档</el-button > <el-button type="primary" plain
@click="checkByDocAuthority('web')" >站端可看文档</el-button > <el-button
type="primary" plain @click="checkByDocAuthority('province')"
>网省可看文档</el-button > </div> 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&vuex求和案例
• » 下一篇：el-table动态合并数据相同的列