elementui 点击删除按钮弹出提示框

在使用 elementui 的时候，如果要点击删除按钮弹出提示框，可以使用 elementui 提供的 Dialog 组件。

首先，在 template 中添加 Dialog 组件：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="提示"
    @close="closeDialog"
  >
    确定要删除吗？
  </el-dialog>

  <el-button @click="openDialog">删除</el-button>
</template>

然后，在 script 中设置 Dialog 组件的 visible 属性和 openDialog 和 closeDialog 方法：

export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};

这样，当点击删除按钮时，就会弹出一个带有“确定要删除吗？”的提示框。

相关问题

写一个elementui 数据列表，点击删除按钮弹出提示框，选择是否删除的demo

首先，我们需要在页面中引入 Element UI 库，并在 `main.js` 文件中进行 Vue 实例的初始化，以及引入和使用 Element 组件库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

然后，在我们的组件中，需要引入 `el-table`、`el-table-column` 和 `el-button` 组件，并将数据列表的数据通过 `v-for` 指令渲染出来，在每一行的最后一列添加一个删除按钮。

<template>
  <div>
    <el-table :data="dataList">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 24 }
      ]
    }
  },
  methods: {
    handleDelete(index) {
      this.$confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

elementui的弹出框

ElementUI提供了多种类型的弹出框组件，例如el-dialog和MessageBox。el-dialog是一个可定制的弹出框组件，可以用于展示内容、进行交互等。MessageBox是一个快速创建弹出框的方法，可以用于显示提示信息、确认操作等。

在Vue中使用ElementUI的弹出框组件时，可以通过this.$confirm方法创建一个确认框，代码如下：

this.$confirm("没有权益进行这项操作", "提示", { 
  type: "warning", 
  showClose: false, 
  showCancelButton: false, 
  showConfirmButton: false, 
})
.then(() => {})
.catch(() => {});

此代码会创建一个类型为warning的确认框，没有关闭按钮、确认按钮和取消按钮，并在2秒后自动关闭。在then方法中可以处理确认操作，而在catch方法中可以处理取消操作。

另外，可以使用el-dialog组件来创建一个可定制的弹出框，代码如下：

<el-dialog
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :close-on-click-modal="false"
  :show-close="false"
>
  <!-- 弹出框的内容 -->
</el-dialog>

这段代码会创建一个弹出框，通过v-model指令和dialogVisible变量来控制弹出框的显示和隐藏。dialogTitle变量用于设置弹出框的标题，close-on-click-modal属性用于禁止点击遮罩层关闭弹出框，show-close属性用于隐藏关闭按钮。在弹出框的内容部分可以自定义需要展示的内容。

通过使用这两种方法，你可以根据需要创建不同类型的弹出框，并实现相应的交互和功能。