前端那些事20240129-前端那些事-avue2增删改查方法删除数据

最新推荐文章于 2024-09-06 22:20:29 发布

前端歌谣

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量392

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/135910440

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

本文介绍了在使用Vue.js框架中如何实现一个简单的CRUD（创建、读取、更新、删除）表格，重点展示了删除数据的功能，包括用户确认对话框和操作后的消息提示。

摘要由CSDN通过智能技术生成

<avue-crud :data="data" :option="option" @row-del="rowDel"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          editBtn:false,
          addBtn:false,
          delBtnText:'删除数据',
          delBtnIcon:'el-icon-user',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      rowDel(form,index){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => { });
      }
    }
}
</script>