Encapsulation of tabular data methods, paging methods and components, and reuse of paging components

Language 2023-04-09 21:20:11 views: null

leave list

 1. General method encapsulation of data acquisition and display

<template>
    <div> <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table></div>
  </template>
  
  <script>
  import {  getTableData } from '@/utils/table.js'
  export default {
    data(){
      return{
        tableData: []
      }
    },
    created(){
      getTableData(this, '/works')
    }
  }
  </script>
  
  <style>
  
  </style>

 table.js

//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.total
        }
    })
    .catch((error) => {
        throw error;
    });
}

2. Data conversion

A total of two layers of traversal:

1. Get the data object - user

2. Because the data to be converted is in each user object, ∴ traverse the user object first

3. Each user object has a lot of data, all in the form of key-value pairs. When there are more than one or two places of data that need to be converted in the table, in order to improve code reusability, an array is used to store the key names of the data that need to be converted. Finally, you only need to traverse the array of user objects, judge through the ternary formula, and then modify the new value (built for display without modifying the original data)

<template>
    <div> <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table></div>
  </template>
  
  <script>
  import {  getTableData } from '@/utils/table.js'
  export default {
    data(){
      return{
        tableData: []
      }
    },
    created(){
      getTableData(this, '/works', {} , ['completed'])
    }
  }
  </script>
  
  <style>
  
  </style>
//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.total
            root.tableData.map(item =>  {
                arr.map(aItem => [
                    item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
                ])
            })
        }
    })
    .catch((error) => {
        throw error;
    });
}

Data loading animation -      use the official documentation

Instruction mode:  Service mode:

 Backend implements pagination

 View the request backend interface: found that two parameters are required - the number of pages and the number of items per page

 The front-end method is to use the formula to calculate, refer to the blog post

 The backend method is used here: paging is completed by the backend, so every time the number of data items and the current page number of the page are switched, a request must be sent according to the interface request parameters.

debug: The total number of entries and data page numbers are not displayed. 

After modifying to add scss style:

<template>
  <div class="absenceList">
    <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
      v-loading="loading"
      element-loading-text="拼命加载ing"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getTableData } from "@/utils/table.js";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: true, //加载动画
    };
  },
  created() {
    getTableData(this, "/works", { page: this.currentPage, size: this.pageSize }, ["completed"]);
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      getTableData(this, "/works", { page: this.currentPage, size: val }, ["completed"]);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      getTableData(this, "/works", { page: val, size: this.pageSize }, ["completed"]);
    },
  },
};
</script>

<style lang="scss">
.absenceList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.data.total
            root.tableData.map(item =>  {
                arr.map(aItem => [
                    item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
                ])
            })
            root.loading = false
        }
    })
    .catch((error) => {
        throw error;
    });
}

Encapsulation and reuse of back-end paging components

 Under the common folder, create a new Pagin.vue component, copy the code related to paging from the previous page, and modify it as follows:

<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" :url="url">
    </el-pagination>
  </div>
</template>

<script>
import { getTableData } from "@/utils/table.js";
export default {
  props: {
    total: Number,
    url: String,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    getTableData(
      this.$parent,
      this.url,
      { page: this.currentPage, size: this.pageSize },
      ["completed"]
    );
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      getTableData(
        this.$parent,
        this.url,
        { page: this.currentPage, size: val },
        ["completed"]
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      getTableData(this.$parent, this.url, { page: val, size: this.pageSize }, [
        "completed",
      ]);
    },
  },
};
</script>

<style lang="scss">
.pagination {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

Use the idea of ​​componentization to encapsulate pagination components. Points to pay attention to:

        1. Only keep the parameters related to the function of paging itself

         2. Send the parameters of the backend request ===> the root node of the parent component and the passed url

 Paging component reuse:

 AbsenceListsManage.vue

<template>
  <div class="absenceListsManage">
    <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
      v-loading="loading"
      element-loading-text="拼命加载ing"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paging :total="total" :url="url"></Paging>
  </div>
</template>
<script>
import Paging from "../common/Paging.vue";
export default {
  components: {
    Paging,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      loading: true, //加载动画
      url: "/works",
    };
  },
};
</script>

<style lang="scss">
.absenceListsManage {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

After using componentization, the final effect is the same, and the code is more readable. 

Guess you like

Origin blog.csdn.net/qq_45947664/article/details/128188863
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com