SPA项目之主页面--数据表格的增删改查

Welcome Huihui's Code World ! !

接下来看看由辉辉所写的关于Vue+ElementUI的相关操作吧

目录

Welcome Huihui's Code World ! !

一.增删改查

1.样式准备

2.编码

①增

代码

效果

②删

代码

效果

③改

代码

效果

④查

代码

效果

二.表单验证

1.在表单中使用验证规则

2.定义验证规则

3..触发表单验证

---

一.增删改查

1.样式准备

2.编码

①增

代码

myshow() {
        this.dialogFormVisible = false;
        this.title = '新增窗体';
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      },
 open(index, row) {
        this.dialogFormVisible = true;
        if (row) {
          this.title = '编辑窗体';
          this.book.id = row.id,
            this.book.bookname = row.bookname,
            this.book.price = row.price,
            this.book.booktype = row.booktype
        }
      },
      sure() {
        /* 表单验证 */
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑窗体') {
              url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            }
            this.axios.post(url, params).then(r => {
              console.log(r);
              this.myshow();
              this.select({});
            }).catch(e => {

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

效果

②删

代码

 del(idx, row) {
        this.$confirm('此操作将永久删除该行数据, 是否继续??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            console.log(r);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.select({});
          }).catch(e => {

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

效果

③改

代码

myshow() {
        this.dialogFormVisible = false;
        this.title = '新增窗体';
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      },
 open(index, row) {
        this.dialogFormVisible = true;
        if (row) {
          this.title = '编辑窗体';
          this.book.id = row.id,
            this.book.bookname = row.bookname,
            this.book.price = row.price,
            this.book.booktype = row.booktype
        }
      },
      sure() {
        /* 表单验证 */
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑窗体') {
              url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            }
            this.axios.post(url, params).then(r => {
              console.log(r);
              this.myshow();
              this.select({});
            }).catch(e => {

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

效果

④查

代码

select(params) {
        let url = this.axios.urls.BOOK_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {


        })
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }

        this.select(params)
      },
      handleSizeChange(num) { //当前所展示的数据条数值发生变化时所触发的事件
        console.log("展示的条数是" + num)
        let params = {
          bookname: this.bookname,
          rows: num,
          page: this.page
        }
        this.select(params)
      },

      handleCurrentChange(p) { //当前所展示的页码发生变化
        console.log("当前是第" + p + "页")
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.select(params)
      },

效果

所有代码

url配置

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
  'SERVER': 'http://localhost:8080', //服务器
  'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
  'SYSTEM_USER_DOREG': '/user/userRegister', //注册
  'SYSTEM_MENU_TREE': '/module/queryRootNode', //动态树
  'BOOK_LIST': '/book/queryBookPager', //书籍列表
  'BOOK_ADD': '/book/addBook', //书籍增加
  'BOOK_UPD': '/book/editBook', //书籍修改
  'BOOK_DEL': '/book/delBook', //书籍删除
  'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    return this.SERVER + this[k];
  }
}

二.表单验证

1.在表单中使用验证规则

 
    
      
        
          
        
        
          
        
        
          
            
          
        

      
      

        取 消
        确 定
      
    

2.定义验证规则

rules: {
          bookname: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入书籍价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请选择书籍类型',
            trigger: 'blur'
          }]
        },

3..触发表单验证

sure() {
        /* 表单验证 */
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑窗体') {
              url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            }
            this.axios.post(url, params).then(r => {
              console.log(r);
              this.myshow();
              this.select({});
            }).catch(e => {

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

好啦，今天的分享就到这了，希望能够帮到你呢！