实现elementui删除选择的

最新推荐文章于 2023-03-19 11:00:00 发布
最新推荐文章于 2023-03-19 11:00:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45622540/article/details/103587193
版权

elementui里的是全选是全部选，遇到的需求是删除选择的，如下图：
在这里插入图片描述
在这之前比较关注如何实现功能，解决这个需求需要理解elelmentui实现此功能的原理，我也学到了，要培养多问几个为什么的习惯，善于思考，善于专研，遇到一些问题的时候就能更有思路

具体实现如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前端码字
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何卸载或者安装element UI
recallMei的博客
07-19 1万+
卸载：npm uninstall element-ui 安装：npm i element-ui -S
在vue ui 中下载的element插件如何卸载并安装element-plus
l110101的博客
12-15 6139
Vue版本与element版本冲突，vue ui 下载的插件卸载不了
vue+elementui新增/编辑/删除
CMDN123456的博客
03-05 3733
vue+elementui 调用接口的新增/编辑/删除
MessageBox弹框
weixin_46852620的博客
01-31 598
<!-- 导入 --> import { MessageBox } from 'element-ui'; Vue.prototype.$confirm = MessageBox.confirm <script> // 根据Id删除对应的用户信息 async removeUserById(id) { // 弹框询问用户是否删除数据 const confirmResult = await this.$confirm( '此操作将永久删除
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
前端vue+elementUI如何实现记住密码功能
10-14
本文将详细介绍如何使用Vue和Element UI来实现这一功能，主要依赖于浏览器的Cookie机制。 首先，我们需要理解Cookie的基本使用。Cookie是服务器发送到用户浏览器并存储在本地的一小块数据，用于跟踪用户状态。在...
vue-elementUI实现的电商后台管理系统
最新发布
09-18
使用的技术：vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 功能介绍： 登录 路由拦截 商品管理（增加、编辑、搜索、删除） 角色管理（增加、编辑、搜索、删除、权限管理...
vue+elementUI实现时间线的自定义显示.zip
04-22
在这个"vue+elementUI实现时间线的自定义显示.zip"项目中，我们将看到如何利用Element UI的组件和Vue.js的特性来创建一个定制化的时间线。 首先，让我们关注"index.vue"这个文件，这是Vue.js应用的主要入口文件。在...
使用elementUI实现将图片上传到本地的示例
10-18
总的来说，使用 Element UI 实现图片上传到本地的流程包括前端通过 `el-upload` 组件选择文件，触发上传请求，后端接收到请求后保存文件到本地，并将保存路径返回给前端。在实际开发中，还需要考虑错误处理、权限...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
Element-UI中Select选择器详解
All___Blue的博客
11-30 5609
最近开发的后台管理系统项目采用Vue+Element-UI技术架构，在使用Elment-UI中Select组件的时候遇到了比较多的操作难题，官网上关于这个组件的使用文档介绍的不是很详细，仅仅提供了一些基本用法，很多拓展场景都没有涉及到，在查阅了大量资料之后终于将目前的需求都完美解决了，这里整理一些Select组件的使用方案，希望能帮到有同样需求的同学。 项目已上传github，欢迎大家下载交流。 前端项目地址：https://github.com/Hanxueqing/Element-select 项目运行
element-ui select 选择器获取选择项
weixin_43805439的博客
03-27 1万+
element-ui select 选择器获取选择项
Element-ui删除组件
progrmmmm的博客
11-19 742
<template> <div class="flexShow"> <el-popover placement="top" width="160" v-model="visible"> <p>这是一段内容这是一段内容确定删除吗？</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type=.
使用ElementUI进行删除操作
Jane0129的博客
03-19 1063
使用ElementUI进行删除操作,功能包含点击按钮弹窗,提示是否删除,点击确认提示删除成功,点击取消提示取消删除。此处主要用到了$confirm。
vue+element-ui 删除操作
weixin_44858696的博客
10-12 1695
一个按钮给方法传参行内的id <el-button type="danger" plain icon="el-icon-edit-outline" :loading="isDialogSubmiting" size="mini" @click="...
Vue使用ElementUI的确认框进行删除操作(包含前后端代码)
见证自己学习,成长的记录
02-02 6342
今天做自己项目的时候，有一个删除的业务，正好遇到了确认框，在此纪念一下。这里我是使用的ElementUI的确认框！先看下我的页面布局吧由于使用起来比较简单，直接上代码了。总的来说，使用起来还是很简单的。后面遇到什么情况，再回来补充！
vue+element-ui操作删除（单行和批量删除）
weixin_33889665的博客
08-15 3685
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue中Element-ui安装、卸载、更新
weixin_42645716的博客
05-14 1万+
首先：安装 一、命令行中输入： $ npm install element-ui -S 二、正常安装以后，会得到安装版本 三、查看项目配置文件中，是否有版本号 四、安装成功以后，在node_modules文件夹下，element-ui，所有的安装文件都可以在这里找到。 五、在main.js中引入element组件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Elem
elementui虚拟删除，前端作删除操作splice
阿小绿的博客
11-20 1086
elementui虚拟删除（并未上交到数据库的删除） <el-table> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > <template slot-scope="scope"> <el-button size="small" type="text" icon="el-icon-delet
elementui实现批量删除
09-15
要实现批量删除，你可以使用 ElementUI 中的表格组件和对应的操作列。以下是一种实现方法： 1. 首先，在你的表格中添加一个复选框列。可以使用 `<el-table-column>` 组件，并设置 `type="selection"`。 2. 在你的数据源中，为每条数据添加一个 `selected` 属性，用于表示是否选中该条数据。默认情况下，该属性值为 `false`。 3. 在表格的底部或顶部，添加一个按钮，用于触发批量删除操作。可以使用 `<el-button>` 组件，并设置 `@click` 事件监听。 4. 在点击批量删除按钮时，获取已选中的数据项，并执行删除操作。 下面是一个示例代码： ```html <template> <div> <el-button type="danger" @click="batchDelete">批量删除</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" width="60"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, selected: false }, { name: '李四', age: 25, selected: false }, { name: '王五', age: 30, selected: false }, ] }; }, methods: { batchDelete() { const selectedItems = this.tableData.filter(item => item.selected); // 在这里执行批量删除操作，比如向后端发送请求 // 删除后更新表格数据 this.tableData = this.tableData.filter(item => !item.selected); } } }; </script> ``` 以上代码中的 `tableData` 是一个数组，存储表格的数据。当点击批量删除按钮时，`batchDelete` 方法会获取所有选中的数据项，并执行删除操作。删除完成后，更新 `tableData` 数据，以更新表格显示。 请注意，该示例仅演示了前端的实现逻辑，实际的操作可能需要与后端进行交互，具体的实现方式会因你的项目需求而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值