vue+element 根据状态，显示不同的操作按钮

效果截图：

VUE 核心功能代码片段

<!--列表--><el-table :data="hrs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"><el-table-column type="selection" width="55"></el-table-column><el-table-column type="index" width="60"></el-table-column><el-table-column prop="companyName" label="招聘企业" width="120" sortable></el-table-column><el-table-column prop="companyPosition" label="招聘岗位" width="100"  sortable></el-table-column><el-table-column prop="education" label="学历要求" :formatter="formatEducation" width="100" sortable></el-table-column><el-table-column prop="workYear" label="工作经验" width="100" sortable></el-table-column><el-table-column prop="salary" label="薪资待遇" :formatter="formatSalary" min-width="120" sortable></el-table-column><el-table-column prop="createDt" label="创建时间" min-width="100" sortable></el-table-column><el-table-column prop="publisher" label="发布人" min-width="100" sortable></el-table-column><el-table-column prop="status" label="状态" :formatter="formatSatatus" min-width="100" sortable></el-table-column><el-table-column label="操作" width="240"><template scope="scope"><el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button><el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status !== 2">发布</el-button><el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status !== 2">编辑</el-button><el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)" v-if="scope.row.status !== 2">删除</el-button><el-button type="danger" size="small" @click="handleRevoke(scope.$index, scope.row)" v-if="scope.row.status === 2">撤销</el-button></template></el-table-column></el-table>

总结：通过 v-if指令决定按钮的显示隐藏。

vue+element 根据状态，显示不同的操作按钮相关推荐

VUE,数字状态转换为中文、根据不同状态显示不同颜色、element icon的自定义颜色
VUE,数字状态转换为中文.根据不同状态显示不同颜色.element icon的自定义颜色在页面根据数字显示中文状态.根据不同状态显示不同颜色 element 的icon是否可以改变颜色.大小? 在 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
Habit-基于JFinal+vue+element的后台通用模板项目
介绍长期做外包,一直想找个时间整理下一款简单实用的后台管理系统,奈何一直没找到合适的,就花了点时间自己东看看,西凑凑整了一套. 基于JFinal的后台管理系统,采用了简洁强大的JFinal作为web ...
人脸识别外包比赛-会议室管理平台（vue+ELement+Echats）项目总结
Vue+Element+Echats项目总结源码链接 => ?‍?ConferencesManagement 前言最近参加了大学生服务外包比赛,我们队伍选做的是智能会议室管理系统的命题,我负 ...

vue+element 根据状态，显示不同的操作按钮

vue+element 根据状态，显示不同的操作按钮相关推荐

最新文章

热门文章