Vue+elementUI-书籍的增删改

一. 书籍的添加

1. 在action.js中添加接口地址进行管理
   ‘BOOK_ADD’: ‘/book/addBook’, //书籍新增
   ‘BOOK_EDIT’: ‘/book/editBook’, //书籍修改
   ‘BOOK_DEL’: ‘/book/delBook’, //书籍删除

2. 在BookList.vue添加弹窗表单

   dialogFormVisible 默认为false不显示此弹窗
   @close关闭弹窗时调用clear方法
   el-option标签中必须有唯一标识key
   

   <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
     <el-form :model="book">
       <el-form-item label="编号" :label-width="formLabelWidth">
         <el-input v-model="book.id" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="书籍名称" :label-width="formLabelWidth">
         <el-input v-model="book.bookname" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="价格" :label-width="formLabelWidth">
         <el-input v-model="book.price" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="书籍类别" :label-width="formLabelWidth">
         <el-select v-model="book.booktype" placeholder="请选择活动区域">
           <el-option v-for="ty in booktype" :label="ty.name" :value="ty.name" :key="'key_'+ty.id"></el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="clear">取 消</el-button>
       <el-button type="primary" @click="doSub">确 定</el-button>
     </div>
   </el-dialog>
   

3. 添加新增按钮
   

   <el-button type="success" @click="open">添加</el-button>
   

4. open事件
   修改dialogFormVisible 为true打开弹窗

   open() {
     this.dialogFormVisible = true;
   },
   

5. clear事件
   为了在关闭弹窗后,再次打开表单时,让表单的数据为空

   clear() {
     title: '新增窗体';
     this.dialogFormVisible = false;
     this.book = {
       id: '',
       bookname: '',
       price: '',
       booktype: ''
     };
   },
   

6. doSub事件
   提交表单
   title参数为了判断要弹出的窗口是新增窗口,还是修改窗口,从而修改url
   提交数据时,不要直接将book实体提交,可能会造成数据紊乱,需要在封装在另一个实体中

   doSub(title) {
     let url = this.axios.urls.BOOK_ADD;
     if (title == '修改窗口') {
       url = this.axios.urls.BOOK_EDIT;
     }
     let params = {
       id: this.book.id,
       bookname: this.book.bookname,
       price: this.book.price,
       booktype: this.book.booktype
     }
     this.axios.post(url, params).then(e => {
       console.log(e);
       if (e.data.success) {
         this.query({});
         this.$message({
           message: e.data.msg,
           type: 'success'
         });
       } else {
         this.$message({
           message: e.data.msg,
           type: 'error'
         });
       }
     }).catch(err => {})
   },
   

7. 结果
   

二. 书籍的修改

在表单的后面添加功能列

scope.$index 行下标 scope.row 行数据

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

修改open方法实现当存在行数据时,修改当前的title为修改窗口,并将数据存入book实体,实现数据绑定到弹窗

open(idx, row) {
  if (row) {
    this.title = '修改窗口';
    this.book = {
      id: row.id,
      bookname: row.bookname,
      price: row.price,
      booktype: row.booktype
    };
  }
  this.dialogFormVisible = true;
},

三. 书籍的删除

添加删除方法del
弹出询问框 是否要删除


当确认输出后发送请求提交需要删除的数据的 id

删除后再次查询显示数据

del(idx, row) {
  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let url = this.axios.urls.BOOK_DEL;
    let params = {
      id: row.id
    }
    this.axios.get(url, {
      params: params
    }).then(e => {
      if (e.data.success) {
        this.query();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      } else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      }
    }).catch(err => {})
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
},

四. 数据校验

在表单el-form头添加属性rules, 绑定属性 ref

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
  <el-form :model="book" :rules="rules" ref="book">
    <el-form-item label="编号" :label-width="formLabelWidth">
      <el-input v-model="book.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
      <el-input v-model="book.bookname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
      <el-input v-model="book.price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
      <el-select v-model="book.booktype" placeholder="请选择活动区域">
        <el-option v-for="ty in booktype" :label="ty.name" :value="ty.name" :key="'key_'+ty.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="clear">取 消</el-button>
    <el-button type="primary" @click="doSub">确 定</el-button>
  </div>
</el-dialog>

在data中添加rules

rules: {
  bookname: [{
      required: true,
      message: '请输入书籍名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 8,
      message: '长度在 2 到 8 个字符',
      trigger: 'blur'
    }
  ],
  price: [{
    required: true,
    message: '请输入价格',
    trigger: 'blur'
  }],
  booktype: [{
    type: 'date',
    required: true,
    message: '请选择书籍类别',
    trigger: 'change'
  }]
}

refs绑定表单头的ref属性

doSub() {
  this.$refs['book'].validate((valid) => {
    if (valid) {
      let url = this.axios.urls.BOOK_ADD;
      if (this.title == '修改窗口') {
        url = this.axios.urls.BOOK_EDIT;
      }
      let params = {
        id: this.book.id,
        bookname: this.book.bookname,
        price: this.book.price,
        booktype: this.book.booktype
      }
      this.axios.post(url, params).then(e => {
        console.log(e);
        if (e.data.success) {
          this.query({});
          this.$message({
            message: e.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: e.data.msg,
            type: 'error'
          });
        }
      }).catch(err => {})
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},