element-plus+vue3（表格删除某一行操作，显示气泡类型的提示删除确认）

最新推荐文章于 2024-05-10 21:12:15 发布
最新推荐文章于 2024-05-10 21:12:15 发布
阅读量601 收藏 9
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62639453/article/details/136349273
版权

在进行删除某一行表格的数据，往往需要进行提示是否删除，选中确认之后才进行删除该项。效果如下：

  导入element-plus，安装方式有如下几种：

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js引入和使用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../src/assets/static/css/normalize.css'
import App from './App.vue'
import router from '../routers/router'
// 引入element-plus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)
app.use(router)
   .use(ElementPlus)
   .use(createPinia())
   .mount('#app')

我的实际运用代码：

<el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column fixed prop="id" label="项目id" width="80">
            </el-table-column>
            <el-table-column prop="name" label="项目名称" width="120">
            </el-table-column>
            <el-table-column prop="manage" label="项目经理" width="100">
            </el-table-column>
            <el-table-column prop="supplier" label="供应商" width="120">
            </el-table-column>
            <el-table-column prop="type" label="项目类型" width="100">
            </el-table-column>
            <el-table-column prop="address" label="地理位置" width="150">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template #default="scope">
                <el-popconfirm
                  confirm-button-text="Yes"
                  cancel-button-text="No"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="Are you sure to delete this?"
                  @confirm="confirmEvent(scope.$index)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <el-button
                      size="small"
                      type="danger"
                      round
                      @click.prevent="deleteRow(scope.$index)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

 js代码：

<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  InfoFilled
} from "@element-plus/icons-vue";
import Commonhead from '../src/components/Commonhead.vue';
const options = ref([
  {
    value: "整改通知",
    label: "整改通知",
  },
  {
    value: "临检通知",
    label: "临检通知",
  },
]);
var tableData = ref([
  {
    id: "2211",
    name: "名称示例",
    manage: "郭河镇",
    supplier: "供应商名称",
    type: "公交总站",
    address: "广州市越秀区环市路动物园总站",
  },
  {
    id: "2209",
    name: "名称示例",
    manage: "刘明",
    supplier: "供应商名称",
    type: "公交总站",
    address: "广州市天河区东站客运站",
  },
]);
const deleteRow = (index) => {
  console.log(index);
};
const confirmEvent = (index) => {
  console.log("confirm!");
  tableData.value.splice(index, 1);
};
const cancelEvent = () => {
  console.log("cancel!");
};


</script>

所运用在该项目页面完整代码实例：

 

<template>
  <div class="container">
    <Commonhead :title="title"></Commonhead>
    <div class="form">
      <div class="form-item">
        <div class="form-item-title">通知类型:</div>
        <el-select
          v-model="value"
          clearable
          placeholder="选择通知类型"
          style="width: 400px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form-item">
        <div class="form-item-title">通知内容:</div>
        <el-input
          style="width: 400px"
          v-model="textarea"
          :autosize="{ minRows: 3, maxRows: 10 }"
          type="textarea"
          placeholder=""
        />
      </div>
      <div class="form-item">
        <div class="form-item-title">关联项目:</div>
        <div class="table">
          <div class="add-btn" @click="gotoAddAssociatedItems">添加关联项目</div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column fixed prop="id" label="项目id" width="80">
            </el-table-column>
            <el-table-column prop="name" label="项目名称" width="120">
            </el-table-column>
            <el-table-column prop="manage" label="项目经理" width="100">
            </el-table-column>
            <el-table-column prop="supplier" label="供应商" width="120">
            </el-table-column>
            <el-table-column prop="type" label="项目类型" width="100">
            </el-table-column>
            <el-table-column prop="address" label="地理位置" width="150">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template #default="scope">
                <el-popconfirm
                  confirm-button-text="Yes"
                  cancel-button-text="No"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="Are you sure to delete this?"
                  @confirm="confirmEvent(scope.$index)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <el-button
                      size="small"
                      type="danger"
                      round
                      @click.prevent="deleteRow(scope.$index)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="send-btn">发送</div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  InfoFilled
} from "@element-plus/icons-vue";
import Commonhead from '../src/components/Commonhead.vue';
const value = ref("");
const textarea = ref("");
const title = ref("整改通知 > 发送通知");
const options = ref([
  {
    value: "整改通知",
    label: "整改通知",
  },
  {
    value: "临检通知",
    label: "临检通知",
  },
]);
var tableData = ref([
  {
    id: "2211",
    name: "名称示例",
    manage: "郭河镇",
    supplier: "供应商名称",
    type: "公交总站",
    address: "广州市越秀区环市路动物园总站",
  },
  {
    id: "2209",
    name: "名称示例",
    manage: "刘明",
    supplier: "供应商名称",
    type: "公交总站",
    address: "广州市天河区东站客运站",
  },
]);
const deleteRow = (index) => {
  console.log(index);
};
const confirmEvent = (index) => {
  console.log("confirm!");
  tableData.value.splice(index, 1);
};
const cancelEvent = () => {
  console.log("cancel!");
};
const router = useRouter();
const route = useRoute();
const gotoAddAssociatedItems = () => {
  router.push({
    path: "/notice/sendNotifications/addAssociatedItems",
  });
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.form {
  width: 1000px;
  margin: 0 auto;
}
.form-item {
  display: flex;
  margin: 20px;
}
.form-item-title {
  margin-right: 15px;
  font-size: 14px;
  /* width: 100px; */
}
.form-item-title::before {
  content: "*";
  left: 0;
  top: 0;
}
.add-btn {
  width: 110px;
  font-size: 14px;
  height: 30px;
  text-align: center;
  color: #fff;
  background-color: #f5b90f;
  line-height: 30px;
  border-radius: 5px;
  margin-bottom: 15px;
  cursor: pointer;
}
.send-btn {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f5b90f;
  color: #fff;
  font-size: 14px;
  margin: 50px auto;
  border-radius: 5px;
  cursor: pointer;
}
</style>

～蓝桉
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
ElementUI (el-table )添加、删除行，清空表格
热门推荐
NJR10byh的博客
10-07 1万+
效果图 Step1: 创建表格 用el-table创建表格，绑定data中数据 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" stripe class="man-table" style="width: 100%" @selection-change="handleD
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行
BADAO_LIUMANG_QIZHI的博客
08-05 5881
场景 效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList， 并且通过 <el-table-column type="selection" width="30" align="center" /> 添加了勾选框。 然后通过@selection-change=".
vue3+element-plus: el-table表格动态添加或删除行
最新发布
qq_38210427的博客
05-10 539
element-plus，动态添加删除行，行内放input输入框 / select下拉框。
【前端案例】如何实现表格的删除、修改（使用element-plus依赖）
weixin_55723857的博客
12-19 2174
【需求】通过vue将下面的数据，填充到表格中，并实现数据的删除、修改操作。【提前准备】搭建好一个vue工程，并安装好element-plus依赖配置。
【el-elementUI】---删除弹出窗口确认操作
m0_56349322的博客
03-26 1762
ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
DZQ1223的博客
03-27 2605
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行。
vue2 element-ui实现表格新增一条数据 并在表格里面编辑删除（并点击字段才会出现输入框 编辑 点击其他地方输入框消失）
qq_44716001的博客
06-14 2762
【代码】vue2 element-ui实现表格新增一条数据 并在表格里面编辑删除（并点击字段才会出现输入框 编辑 点击其他地方输入框消失）
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Vant的电商管理系统源码.zip
12-30
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码 基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码 基于Spring Boot+Vue 3+Element-Plus+Vue-Router+...
Vue使用ElementUI的确认框进行删除操作(包含前后端代码)
见证自己学习,成长的记录
02-02 6101
今天做自己项目的时候，有一个删除的业务，正好遇到了确认框，在此纪念一下。这里我是使用的ElementUI的确认框！先看下我的页面布局吧由于使用起来比较简单，直接上代码了。总的来说，使用起来还是很简单的。后面遇到什么情况，再回来补充！
element plus 删除弹窗，使用useHook方式
weixin_36878452的博客
02-29 192
element plus 删除弹窗，确定按钮loading反馈执行中
Vue3+AntdesignVue3/ElementPlus a-upload实现上传(上传前控制类型，数量，多文件限制大小自动拦截)、预览、单个下载、删除（删除前确认）、批量下载（压缩包）（终极版）
朝花夕拾的博客
05-26 1746
文件限制一张 需要替换掉上次上传的文件 用到slice（-1） 代表获取数组末尾的元素。这里设置为true还是不显示问题 需要回显时将文件的status改为done。批量下载文件 文件类型为压缩包文件流。resolve（true）确认删除。多文件上传 限制大小 自动过滤拦截。rejcet（false）不删除。上传限制一张文件并且限制文件类型。添加Promise对象接收。表单提交 文件转文件流。
【element】删除二次确认框 this.$confirm
jieweiwujie的博客
10-28 2665
<template> <div class="home"> <div id="nav"> <el-button type="info" @click="showFun">showFun</el-button> </div> </div> </template> <script> export default { methods:{ show.
vue3 简单的添删修查 (ref)
m0_71835253的博客
06-29 761
vue 3 简单的添删修查
vue3+typescript+elementPlus实现表单的单字段校验、取消校验结果、去除、属性
08-30 905
vue3+typescript+elementPlus实现表单的单字段校验、取消校验结果、去除、属性
用element-plus+vue3+ts来写
05-17
好的，让我们开始吧！ 首先，我们需要在项目中安装 `element-plus`，你可以使用 npm 或 yarn 进行安装，比如： ``` npm install element-plus --save ``` 或者 ``` yarn add element-plus ``` 安装完成后，我们需要在 `main.ts` 中引入并使用 `element-plus`，代码如下： ```typescript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 现在我们已经成功引入了 `element-plus`，接下来我们可以开始编写一些组件。 例如，在 `src/components` 目录下创建一个名为 `HelloWorld.vue` 的组件，代码如下： ```vue <template> <div class="hello"> <el-button type="primary" @click="handleClick">Click me!</el-button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { ElButton } from 'element-plus' export default defineComponent({ name: 'HelloWorld', components: { ElButton }, methods: { handleClick() { console.log('Hello, world!') } } }) </script> ``` 在这个组件中，我们使用了 `ElButton` 组件，并在它的点击事件中打印了一条消息。 接下来，我们可以在 `App.vue` 中使用这个组件，代码如下： ```vue <template> <div id="app"> <HelloWorld /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld } }) </script> ``` 现在，我们已经成功使用 `element-plus` 来创建了一个简单的组件，并在 `App.vue` 中使用它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值