Element表格如何禁用某一列表项的按钮

最新推荐文章于 2024-06-24 14:54:45 发布
最新推荐文章于 2024-06-24 14:54:45 发布
阅读量1w 收藏 17
点赞数 5
分类专栏： 前端学习记录 前端开发经验笔记 文章标签： Vue  Element 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/princek123/article/details/82910113
版权

例如我们要达到如下效果，使不能对admin进行删除和修改状态的操作

我们只需在按钮内设置属性:disabled="scope.row.username == 'admin'"如下图所示，disabled的值为true时禁用，false时为启用

scope.row.xx代表当前行的某个变量，这里即为当前行的username为admin时即为禁用状态

柯柯就是我
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue+Element中table表格实现可编辑（select下拉框）
10-15
主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue + element-ui实现按钮和权限管理动态路由
01-18
Element-UI则是一个基于Vue.js的UI组件库，提供了大量开箱即用的高质量组件，如表格、按钮、表单、通知等，大大加速了前端开发过程。 1. **动态路由** Vue.js中的动态路由允许我们在同一个URL结构下展示不同的内容...
el-table表格相关禁用
FilterXX的博客
08-14 3535
2020/08/14 el表格禁用相关数据(主要针对select控件) 表格通过操作按钮跳转路由，传参传值到详情页，详情页的表格通过传过来的值进行判断，有值的禁用不可修改，并且表格可新增 代码小记： methods代码如下： 说明： this.tablelist[i].disabled = false // 这一句是手动插入到数据里面的，如果接口返回的数据中没有这种值可以这么做 通过遍历传递过来的表格数据，查找非空值，非空值时，disabled为true（禁用当前表头下的控件） getlistreadon
element table实现多选且根据条件设置多选框的disabled状态
weixin_44738844的博客
07-11 2347
首先，实现多选，很简单，官方文档也有写，: 手动添加一个el-table-column，设type属性为selection即可；需要加:selectable="handleDisable“方法来筛选，我这里是根据提交状态来判断，状态为1就不能选择。然后要根据条件设置多选框的disabled状态。
element-ui table使用type=‘selection‘复选框全禁用-全选禁用_elementui table禁用全选
最新发布
2401_85124640的博客
06-24 527
- 复选框禁用 -->
el-table 控制列表选中状态并且禁用
weixin_46300953的博客
08-04 794
vue element表格如何动态设置按钮禁用状态？
xiejnpeng的博客
12-18 4996
我们只需在按钮内设置属性 :disabled="scope.row.**== ‘实际值’ " 如下图所示，disabled的值为true时禁用，false时为启用 scope.row.xx代表当前行的某个变量 举例： <el-button size="mini" type="text" :disabled ="scope.row.state == 1" icon="el-icon-edit" @click="handleUpdate(scope.row)"
iview与element ui 的table组件指定某一行的禁选问题
weixin_44386929的博客
07-29 1688
1、iview的table组件指定某一行的禁选问题 只需要在js里给 data 项设置特殊 key _disabled: true 禁止选择当前项。 // 获取数据 if (res.code == 200) { // 获得的列表数据 this.dataList = res.data.list // 对数据进行处理 只有待结算状态的复选框可用 for (var i = 0; i < this.dataList.length; i++) { // status不等于0
element-ui-2.15.6.zip
02-23
5. **UI 组件**：Element UI 提供了一系列的组件，如按钮、表格、对话框、通知、布局等，这些组件都是预先设计和实现的，可以直接在 Vue.js 项目中使用，极大地提高了开发效率。 6. **Vue.js 集成**：Element UI 是...
vue+element后台管理系统模板1
11-13
2. **Element UI**：Element提供了大量的UI组件，如按钮、表单、表格、导航、提示等，它们都遵循了Material Design设计规范，使得应用界面具有统一的风格。Element还支持自定义主题，可以根据需求调整颜色和样式，以...
使用elementui实现表格的增加、删除、跳转详情页功能
07-05
可以创建一个表单组件，使用Element UI的`<el-form>`和`<el-form-item>`来收集新数据，然后调用API添加到服务器，更新表格数据。 - 删除：可以为每一行数据添加一个删除按钮，监听点击事件，确认后从数据源移除该...
vue延时执行函数
1281024的博客
05-10 689
我为element-ui的按钮设置了点击后的样式，但是不能点击后生效，发现是因为点击按钮后调用的请求函数是异步的，调用函数查询时，查询到的数据是还没有修改的数据（即查询函数调用的太快了，修改的数据还没有生效），故需要进行延时查询数据。我要获取orderId的数据，由这个数据决定按钮的样式，而我的按钮操作会修改数据库里的这个数据，然后再次进行查询数据渲染。一定要创建一个timer，然后调用延时之前先清除timer的延时。进行延时调用方法，即可查出修改后的数据。
VUE 中点击按钮后根据对某状态的判断将它置灰
m0_59761769的博客
07-22 6502
VUE 中点击按钮后根据对某状态的判断将它置灰
vue element ui button按钮 disabled属性多个条件绑定 实现禁止点击效果
热门推荐
蓝胖子的博客
03-31 1万+
disabled实现禁止点击效果
el-table复选框选中所在的行，右侧按钮禁掉
CC酱写前端的博客
08-31 591
el-table复选框
el-table实现自定义列表功能
您的博客
06-01 5458
el-table列表实现自定义列表功能，实现自定义排序，自定义列表展示，自定义列宽等
el-table 简单的行内编辑，单行可编辑
Jihn46的博客
06-16 6984
el-table 简单的行内编辑，单行新增修改删除，单行可编辑
vue项目 -- element 表格添加多选框（禁用某一行），并且跨分页选择
weixin_55042716的博客
05-11 2670
需求： 在表格中，有个多选框，需要选择数据，但是跨分页后，之前点选的数据就没有了，现在需要做个保存 实现效果： 代码： <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys"> //指定row-key
element el-select+el-checkbox多选实现二级联动单个选项禁用效果以及选中选项对应表头高亮:header-cell-style（中级）
敲代码无敌小奶龙的博客
01-14 3988
element el-select+el-checkbox多选实现下拉框二级联动+禁用单个选项+选中选项对应表头高亮。
vue-element-admin增删改查
06-28
### 回答1： Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案，其功能包括登录、权限管理、Dashboard、表单等常见的后台管理系统功能。 要进行增删改查的操作，需要先了解 Vue-element-admin 的代码结构和数据流，以下是一些常用的操作指南： 1. 添加新页面：可以在 src/views 目录下新建一个.vue 文件，然后在 src/router/index.js 中添加路由。 2. 修改页面：直接修改 src/views 目录下的相应.vue 文件即可。 3. 删除页面：删除 src/views 目录下的相应.vue 文件，并在 src/router/index.js 中删除相应的路由即可。 4. 增加/修改 API 接口：在 src/api 目录下添加/修改对应的.js 文件即可。 5. 增加/修改菜单项：在 src/layout/components/Sidebar/index.vue 文件中找到对应的位置，添加/修改菜单项。 6. 增加/修改权限：在 src/permission.js 文件中修改对应的权限即可。 需要注意的是，在修改 Vue-element-admin 的代码时，建议先熟悉 Vue.js 和 Element UI 的使用，以及了解前端的基本知识。此外，修改代码前最好先备份原有代码，以防止出现不可预料的错误。 ### 回答2： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统，它提供了一套完整的后台管理模板和常用组件，方便开发者快速开发管理系统。 在vue-element-admin中，实现增删改查功能是非常常见的需求。下面就来具体介绍一下如何实现增删改查。 增加数据 在vue-element-admin中，我们通常使用表单来添加新的数据。首先需要定义一个表单组件，可以使用Element UI提供的组件，也可以自行编写。然后，在表单组件中，需要监听表单的提交事件，将表单中的数据发送到后端，以添加新的数据。 对于后端，需要提供一个API，用于接收前端传递过来的数据。通过API将数据保存到数据库中。 删除数据 在vue-element-admin中，删除数据通常是通过点击列表项的删除按钮来实现的。首先需要在列表项中加入删除按钮，并定义一个删除方法。当用户点击删除按钮时，会调用该方法。 然后，在该方法中，需要向后端发送一个请求，告诉后端需要删除的数据的ID。后端需要提供一个API，将指定的数据从数据库中删除。 修改数据 在vue-element-admin中，修改数据通常是通过点击列表项的编辑按钮来实现的。首先需要在列表项中加入编辑按钮，并定义一个编辑方法。当用户点击编辑按钮时，会调用该方法。 然后，在该方法中，需要获取需要编辑的数据的ID，并将其发送到后端。后端需要提供一个API，用于获取指定ID的数据，并将其返回给前端。 返回数据后，将其填充到表单组件中，易于修改。当用户修改完数据后，需要将数据发送到后端，以更新到数据库中。 查询数据 在vue-element-admin中，实现查询数据通常是在页面顶部加入一个查询表单。当用户输入查询条件后，需要向后端发送一个请求，告诉后端需要查询的条件。后端需要提供一个API，接收查询条件，并返回查询结果给前端。 查询结果需要渲染到页面中，以便用户查看。同时，如果查询结果很多，可以考虑进行分页，提高查询效率。 以上就是在vue-element-admin中实现增删改查的大致过程，需要注意的是，每个步骤都需要前后端协同，才能实现完整的功能。 ### 回答3： vue-element-admin是一个基于Vue.js的后台管理系统解决方案，它提供的各种组件和功能可以帮助我们快速搭建出一个完整的后台管理系统。其中，增删改查是后台管理系统中最常见的功能，下面就来详细介绍一下vue-element-admin的增删改查。 一、增加数据 在vue-element-admin中，增加数据分为两种情况：新增数据和批量增加数据。对于新增数据，我们需要引用element-ui的Dialog组件实现弹窗输入新数据，然后将数据通过api的方法传给后端实现数据的插入操作。对于批量增加数据，我们可以使用Vue.js的v-for指令和el-table组件展示已有数据，并通过上传Excel表格的方式批量增加数据。 二、删除数据 删除数据同样需要使用element-ui的Dialog组件来实现删除数据的确认框。在调用删除api接口时，我们需要传递一个或多个需要删除的数据的唯一标识符，并在后端进行相应的删除操作。不过需要注意的是，对于某些敏感数据，我们可以通过后端开发的方式做出逻辑删除而非物理删除的处理。 三、修改数据 修改数据也需要使用element-ui的Dialog组件实现弹窗，并将原有的数据展示在弹窗中，让用户修改之后提交保存。我们需要传递修改后的数据和原有数据的唯一标识符给api接口，然后在后端进行相应的修改操作。 四、查询数据 查询数据是后台管理系统中最常用的功能之一，vue-element-admin通过使用el-form和el-input组件实现数据的模糊查询、精确查询等功能。同时，Vue.js的自定义过滤器可以帮助我们对查询出的数据进行格式化，以便展示给用户。 综上所述，vue-element-admin的增删改查功能涉及到多个组件和功能，需要结合具体业务场景进行设计和开发。不过通过使用vue-element-admin提供的各种组件和api接口，我们可以快速实现一个完整的后台管理系统，并满足各种业务需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值