Vue+Element+Node.js+Mysql实现后端分页

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 15:51   2218   0

table.vue:

<template>
  <div>
    <el-card>
      <el-row :style="{marginBottom: '15px'}">
        <el-col :span="24">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
          <el-button type="primary" size="small" icon="el-icon-minus" @click="deleteArticle">删除</el-button>
          <el-input
            :style="{width: '300px', float: 'right'}"
            placeholder="搜索"
            v-model="searchText"
            suffix-icon="el-icon-search"
            @change="searchArticle"
            :clearable="true"
          ></el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%" v-loading="loading" ref="articleTable">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="title" label="标题" width="400"></el-table-column>
        <el-table-column prop="content" label="内容" :formatter="formatterContent"></el-table-column>
        <el-table-column label="状态" width="200">
          <template slot-scope="scope">
            <el-progress :percentage="Math.ceil(Math.random()*100)" color="#5cb87a"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="编辑" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              @click="editArticle(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :style="{marginTop: '20px'}"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      searchText: "",
    };
  },
  methods: {
    formatterContent(row, column) {
      return row.content.substring(0, 60) + "...";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData(this.currentPage, val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getData(val, this.pageSize);
    },
    getData(pageNumber, pageSize) {
      this.loading = true;
      this.$axios
        .get(
          `http://localhost:5555/api/blog_list/?pageSize=${pageSize}&pageNumber=${pageNumber}&sortName=id&sortOrder=desc`
        )
        .then(
          resp => {
            console.log(resp);
            this.loading = false;
            let ajaxData = [];
            for (let i = 0; i < resp.data.rows.length; i++) {
              ajaxData.push({
                key: resp.data.rows[i].id,
                id: resp.data.rows[i].id,
                title: resp.data.rows[i].title,
                content: resp.data.rows[i].content
              });
            }

            this.tableData = ajaxData;
            this.total = resp.data.total;
          },
          err => {
            this.loading = false;
            console.log(err);
          }
        );
    },
    deleteArticle() {
      // 删除文章
      let _this = this;
      let selection = this.$refs.articleTable.selection;
      let len = selection.length;
      let idArr = [];
      for (let i = 0; i < len; i++) {
        idArr.push(selection[i].id);
      }

      if (len === 0) {
        this.$notify.error({
          title: "错误提示",
          message: "请选择要删除的文章!"
        });
      } else {
        this.$axios
          .post("/api/article/delete/", {
            ids: idArr
          })
          .then(res => {
            if (res.data.ret) {
              _this.$notify.success({
                title: "成功提示",
                message: "文章删除成功!"
              });
              this.getData(1, 5);
              console.log(res);
            } else {
              _this.$notify.success({
     
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP