CUD+表单验证

于 2022-05-12 17:46:43 发布
阅读量243 收藏
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangchang0516/article/details/124727037
版权
本文介绍了如何使用ElementUI进行CUD（创建、更新、删除）操作，特别是焦点放在Dialog弹出框的实现和表单验证上。详细讲解了Dialog的基本结构、表单的创建、验证规则的定义，以及如何在Vue实例中处理表单数据和验证信息。还涵盖了在关闭Dialog时清空表单数据和验证信息的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.后台数据接口准备


   增删改接口

dao:

basedao 

action: 

2.Dialog弹出框

新增按钮按钮

 

  2.1 基本结构

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">
    <!-- form表单 -->
    <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
    ...
    </el-form>
  </el-dialog>

  注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
  注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose"

3.表单 

  3.1 基本结构

  <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
     <el-form-item label="书本编号" :label-width="formLabelWidth">
    <el-input v-model="bookForm.id" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
        <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
     </el-form-item>
     ... 
  </el-form>

  注1：:label-position设置表单对齐方式
  注2：<el-form :model="bookForm"></el-form>设置表单元素属性双向绑定的对象属性名称
  
       data: function() {
       return {
               bookForm: {
           id: null,
           bookname: null,
           price: '',
           booktype: null
           }
           };
       }

  3.2 表单验证

  <el-form :model="bookForm" :rules="rules" ref="bookForm">
     ...
  </el-form>

  注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则
       
       //将el-form-item的prop属性设置为需校验的字段名即可,如下：
       <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
          <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
       </el-form-item>

       //在Vue实例的data属性中定义表单验证规则，如下：
       rules: {
       bookname: [
          {required: true,message: '请输入书本名称！',trigger: 'blur'},
          {min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
       ],
           ...
       }

  注2：有多个表单，怎么在提交进行区分？

       我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
       所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用

  注3：清空表单验证信息
  
       this.$refs[formName].resetFields();

       补充说明：formName是指<el-form ref="bookForm">中定义的ref属性名

  注4：表单重置时必须先清空表单验证信息，再清空表单数据信息
  
       //通过form表单的ref属性来清空表单验证信息
       this.$refs['bookForm'].resetFields();
       //清空上一次表单的数据信息
       this.bookForm.id = null;
       this.bookForm.bookname = null;
       this.bookForm.price = null;
       this.bookForm.booktype = null;

 

​
<template>
  <div class="div-main">
    <!-- 1.面包屑，路径导航 -->
    <el-breadcrumb style="font-size: 16px;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.搜索栏 -->
    <el-form :inline="true" style="margin-top:15px">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 3.数据表格-->
    <el-table :data="tableData" style="margin-top:15px;margin-bottom:-15px;">
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
    </el-table>
    <!-- 分页栏-->
    <el-pagination background style="margin-top: 15px;" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 对话框（新增和编辑共用一个页面）-->
    <el-dialog title="title"
     :visible.sync="dialogFormVisible"
     :close-on-click-modal="false"
     @close="dialogClose">
      <el-form :model="book" :rules="rules" ref="book" >
        <el-form-item prop="bookname" label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
          <el-input  v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input  v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
                <el-option label="玄幻" value="玄幻"></el-option>
                <el-option label="计算机" value="计算机"></el-option>
              </el-select>
        </el-form-item>


  </el-form>
 <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>



  </div>
</template>

<script>
  export default {
    name: 'BookList',
    data: function() {
      return {
        bookname: '',
        tableData: [],
        page: 1,
        rows: 10,
        total: 0,
        title: '新增书本',
        dialogFormVisible: false,
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''

        },
        formLabelwidth: '100px',
         rules: {
                  bookname: [
                    { required: true, message: '请输入书本名称', trigger: 'blur' },
                  ],
                  price: [
                    { required: true, message: '请输入书本价格', trigger: 'blur' },
                  ],
                  booktype: [
                    { required: true, message: '请输入书本类型', trigger: 'change' },
                  ],
               }
      }
    },
    methods: {
      //对话框关闭事件
      dialogClose:function(){
        this.book={
          //清空表单数据
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        };
        //清空表单验证
        this.$refs['book'].resetFields();
      },
      //对话框的打开事件
      open: function() {
        this.dialogFormVisible = true;
      },
      //新增或编辑的保存事件
      save: function() {
                this.$refs['book'].validate((valid) => {
                  if (valid) {
                    //定义请求路径
                    let url=this.axios.urls.BOOK_MANAGER;
                    let methodName="addBook";
                    if(this.title=="编辑书本")
                        methodName="editBook";
                    //定义请求参数
                    this.book['methodName']=methodName;
                    //发送ajax请求
                    this.axios.post(url,this.book).then(resp=>{
                      let data=resp.data();
                      this.$message({
                        message: data.msg,
                        type: data.code==1? 'success':'error'
                      });
                      if(data.success){
                        //关闭对话框、
                        this.dialogFormVisible=false;
                        //刷新数据列表
                        this.query(this.page);
                       }
                    }).catch(err=>{
                      console.log(err)
                    });

                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
      },



      //每页显示条数的改变事件
      handleSizeChange: function(r) {
        console.log(r);
        this.rows = r;
        this.page = 1;
        this.query(1);
      },
      //当前页码的改变事件
      handleCurrentChange: function(p) {
        console.log(p);
        // this.page=p;
        this.query(p);
      },

      query: function(p) {
        this.page = p;
        //定义请求路径
        let url = this.axios.urls.BOOK_MANAGER;
        //定义请求参数
        let params = {
          methodName: 'queryBookPager',
          bookname: this.bookname,
          page: p,
          rows: this.rows
        };
        //发起ajax请求
        this.axios.post(url, params).then(resp => {
          let data = resp.data;
          console.log(data);
          this.total = data.data.total;
          this.tableData = data.data.rows;
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

<style>
  .div-main {
    margin: 15px;
  }
</style>

​

3. CUD

  2.1 新增

  在事件中设置dialogFormVisible="true"即可打开dialog弹出框
  
  2.2 添加修改/删除按钮

  2.3 在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop

  slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取row对象信息和行索引index信息即可

<template>
  <div class="div-main">
    <!-- 1.面包屑，路径导航 -->
    <el-breadcrumb style="font-size: 16px;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.搜索栏 -->
    <el-form :inline="true" style="margin-top:15px">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 3.数据表格-->
    <el-table :data="tableData" style="margin-top:15px;margin-bottom:-15px;">
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
       <el-table-column label="操作">
         <!--插槽 -->
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 分页栏-->
    <el-pagination background style="margin-top: 15px;"
    @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 对话框（新增和编辑共用一个页面）-->
    <el-dialog title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="dialogClose">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域" style="width: 100%;">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="计算机" value="计算机"></el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'BookList',
    data: function() {
      return {
        bookname: '',
        tableData: [],
        page:1,
        rows: 10,
        total: 0,
        title: '新增书本',
        formLabelWidth:'100px',
        dialogFormVisible: false,
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },
        formLabelwidth: '100px',
        rules: {
          bookname: [{
            required: true,
            message: '请输入书本名称',
            trigger: 'blur'
          }, ],
          price: [{
            required: true,
            message: '请输入书本价格',
            trigger: 'blur'
          }, ],
          booktype: [{
            required: true,
            message: '请输入书本类型',
            trigger: 'change'
          }, ],
        }
      }
    },
    methods: {
      //书本编辑
      handleEdit:function(row){
        //设置对话框为显示状态
        this.dialogFormVisible=true;
        //设置标题为编辑书本
        this.title="编辑书本";
        //赋值表单数据
        this.book={
          id: row.id,
          bookname: row.bookname,
          price: row.price,
          booktype:row.booktype
        }

      },
      //书本删除
      handleDelete:function(row){
        this.$confirm('确认删该书本吗',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'warning'
      }).then(()=>{
        let url=this.axios.urls.BOOK_MANAGER;
        let params={
          id:row.id,
          methodName:'delBook'
        };
        this.axios.post(url,params).then(resp => {

              let data = resp.data;

              this.$message({
                message: data.msg,
                type: data.success == true ? 'success' : 'error'
              });


              if (data.success) {
                  //刷新数据列表
                this.query(this.page);
              }
            }).catch(err => {
              console.log(err)
            });

      }).catch(()=>{});

    },

      //对话框关闭事件
      dialogClose: function() {
        this.book = {
          //清空表单数据
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        };
        //清空表单验证
        this.$refs['book'].resetFields();
        //重置对话框
        this.title="新增书本";
      },
      //对话框的打开事件
      open: function() {
        this.dialogFormVisible = true;
      },
      //新增或编辑的保存事件
      save: function() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            //定义请求路径
            let url = this.axios.urls.BOOK_MANAGER;
            let methodName = "addBook";
            if (this.title == "编辑书本")
              methodName = "editBook";
            //定义请求参数
            this.book['methodName'] = methodName;
            //发送ajax请求
            this.axios.post(url, this.book).then(resp => {

              let data = resp.data;

              this.$message({
                message: data.msg,
                type: data.success == true ? 'success' : 'error'
              });


              if (data.success) {
                //关闭对话框、
                this.dialogFormVisible = false;
                //刷新数据列表
                this.query(this.page);
              }
            }).catch(err => {
              console.log(err)
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },



      //每页显示条数的改变事件
      handleSizeChange: function(r) {
        console.log(r);
        this.rows = r;
        this.page = 1;
        this.query(1);
      },
      //当前页码的改变事件
      handleCurrentChange: function(p) {
        console.log(p);
        // this.page=p;
        this.query(p);
      },

      query: function(p) {
        this.page = p;
        //定义请求路径
        let url = this.axios.urls.BOOK_MANAGER;
        //定义请求参数
        let params = {
          methodName: 'queryBookPager',
          bookname: this.bookname,
          page:p,
          rows: this.rows
        };
        //发起ajax请求
        this.axios.post(url, params).then(resp => {
          let data = resp.data;
          console.log(data);
          this.total = data.data.total;
          this.tableData = data.data.rows;
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

<style>
  .div-main {
    margin: 15px;
  }
</style>


  
 
 


 

畅畅子-
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值