element-plus的tab组件如何禁止点击。并且给禁止点击的加上置灰的样式

复制代码
<el-tabs v-model="tabMenu" class="tabs-menu" :before-leave="tabChange">
  <el-tab-pane v-for="item in nemuList" :key="item.id" :label="item.name" :name="item.id" >
    <template #label>
      <div :class="delay==item.id?'disabled':'able'">{{item.name}}</div>
    </template>
    <component :is="item.component" :my-detail="detail" ></component>
  </el-tab-pane>
</el-tabs>

label要写在插槽里。这样方便单独为某一个tab加样式

复制代码
const nemuList = shallowRef([{ name: '申请', id: 0, component: Apply }, { name: '资料审核', id: 1, component: DataReview }, { name: '初评', id: 2, component: InitReview }, { name: '复评', id: 3, component: FinalReview } ]);
const tabMenu = ref(0);
const delay=ref([2,3]);//禁止点击的tab
复制代码
const tabChange = (activeName,oldActiveName) => {
  tabMenu.value=activeName;
  if(delay.value==tabMenu.value){
    console.log("禁止点击")
    return false;
  }
}

给禁止点击的tab添加上样式就行啦

复制代码
.disabled{
  color:#bdbbbb;
}
相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830947 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常8 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip8 小时前
JavaScript事件流
前端·javascript
小菜全8 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C8 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件