标签：Vue false res 列表 book getBookList 增删 page size

<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">图书管理</el-menu-item>
    </el-menu>
    <br />
    <el-row>
      <el-col :span="1" class="grid">
        <el-button
          type="success"
          @click="addFlag=true;dialogVisible = true "
          icon="el-icon-circle-plus-outline"
          size="mini"
          round
        >新增</el-button>
      </el-col>
    </el-row>
    <br />
    <el-table
      :data="bookList"
      border
      style="width: 100%"
      stripe
      ref="multipleTable"
      tooltip-effect="dark"
    >
      <el-table-column label="序号" type="index" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{(page - 1) * size + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="书名"></el-table-column>
      <el-table-column prop="Author" label="作者"></el-table-column>
      <el-table-column prop="Type" label="种类"></el-table-column>
      <el-table-column prop="Count" label="数量"></el-table-column>
      <el-table-column label="编辑" width="100">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editBook(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除" width="100">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBook(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20]"
      :page-size="size"
      style="float:right"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog
      :title="addFlag?'新增图书':'修改图书'"
      style="text-align:left !important"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="书名" style="width:300px">
          <el-input v-model="book.Name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="作者" style="width:280px">
          <el-input v-model="book.Author" placeholder="请输入作者名"></el-input>
        </el-form-item>
        <el-form-item label="种类" style="width:230px">
          <el-input v-model="book.Type" placeholder="请输入种类"></el-input>
        </el-form-item>
        <el-form-item label="库存" style="width:190px">
          <el-input v-model="book.Count" placeholder="请输入库存"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveBook()">提交</el-button>
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      style="text-align:left !important"
      :visible.sync="dialog2Visible"
      :before-close="handleClose"
    >
      <span>你确定要删除这本图书吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDel()">提交</el-button>
        <el-button type="primary" @click="dialog2Visible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      dialogVisible: false,
      dialog2Visible: false,
      activeIndex2: "1",
      total: 0,
      size: 5,
      page: 1,
      bookList: [],
      book: {},
      addFlag: true,
      curId: ""
    };
  },
  watch:{
    //2.x版本的bug 以前用1.x发现没有 假如现在是第三页，只有一条数据了。将其删除，就没有第三页了。应该跳到第二页展示出5条数据。
    //可是数据没有展示。原因是获取list的时候page参数没有改变。依然是3
      total(){
        if(this.total==(this.page-1)*this.size&& this.total!=0){
          this.page-=1;
          this.getBookList()
        }
      }
    },
  methods: {
    handleClose(done) {
      done();
    },
    handleSizeChange(val){
      this.size = val
      this.getBookList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getBookList();
    },
    async getBookList() {
      try {
        let res = await axios.post(
          "http://127.0.0.1:8848/api/v1/book/list",
          qs.stringify({
            page: this.page,
            size: this.size
          })
        );
        this.total = res.data.Data.Total;
        this.bookList = res.data.Data.List;
        
      } catch (e) {
        console.log(e);
      }
    },
    async saveBook() {
      try {
        let res = await axios.post(
          "http://127.0.0.1:8848/api/v1/book/save",
          qs.stringify({
            id: this.book.ID,
            name: this.book.Name,
            type: this.book.Type,
            author: this.book.Author,
            count: this.book.Count
          })
        );
        this.dialogVisible = false;
        this.book = {};
        this.$message({
          message: res.data.Msg,
          type: "success"
        });
        this.getBookList();
      } catch (e) {
        console.log(e);
      }
    },
    delBook(row) {
      this.addFlag = false;
      this.dialog2Visible = true;
      this.curId = row.ID;
    },
    async handleDel() {
      try {
        let res = await axios.post(
          "http://127.0.0.1:8848/api/v1/book/del",
          qs.stringify({
            id: this.curId
          })
        );
        this.curId = "";
        this.dialog2Visible = false;
        this.$message({
          message: res.data.Msg,
          type: "success"
        });
        this.getBookList();
      } catch (e) {
        console.log(e);
      }
    },
    editBook(row) {
      this.book = row;
      this.dialogVisible = true;
      this.addFlag = false;
    }
  },
  mounted() {
    this.getBookList();
  },


};
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

标签：Vue,false,res,列表,book,getBookList,增删,page,size
来源： https://www.cnblogs.com/hailexuexi/p/14924284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。