General background management system front-end interface Ⅸ - data table rendering and processing + front-end paging

Language 2023-04-09 21:22:26 views: null

Data Table Rendering

1. Find

Add a table to the page, search it from the official website of element-ui, and copy it including the data. After checking that there is no problem, clear the tableData to an empty array.

<template>
  <div>
    <el-table :data="tableData" height="auto" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
};
</script>

<style></style>

2. Request data interface

According to the interface, modify the api.js file: request method, address, parameters, and expose the interface.

// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//列表查询接口
export function students(param){
    return{
        method: 'get',
        url: '/students',
        param
    }
}

 3. Send the request before rendering the page

<template>
  <div>
    <el-table :data="tableData" height="auto" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { students } from '@/api/api.js'
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getData()
  },
  methods: {
    getData(params){
      students(params)
      .then((res) => {
        console.log(res.data)
      });
    }
  }
};
</script>

<style></style>

 At this time, the problem of debugging: (It is also possible to modify only 2 places)

api.js 

// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//列表查询接口
export function students(param){
    return service({
        method: 'get',
        url: '/students',
        param
    })
}

Print the returned data result:

 Modify the page header and render the returned data:

1. The prop attribute value of the table header must be the same as the key of the returned data , otherwise it will not be rendered

eg：

2. Style modification ( tips )

 before fixing:

After modification: the scroll bar disappears

<template>
  <div>
    <el-table :data="tableData" height="auto" border style="width: 100%">
      <el-table-column prop="id" label="序号"  align="center"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="class" label="班级" align="center"> </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="small"
            circle
          ></el-button>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        console.log(res.data);
      });
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style></style>

4. Render the returned data to the page

Pass the data and render directly dynamically.

 But write an error like this, as follows:

render===》Something went wrong during rendering, go back and find it.

 Analyze the returned data format, print: res.data:

And when passing data:

 tableData is an object array, and res.data is a large group of object data, including status, message, data, etc. The data that is really tableData is res.data.data

 After modification:

<template>
  <div>
    <el-table :data="tableData" height="450" border style="width: 100%">
      <el-table-column prop="id" label="序号"  align="center"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="class" label="班级" align="center"> </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          ></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        console.log(res.data);
        if(res.data.status === 200){
          this.tableData = res.data.data
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style></style>

Effect: But some problems displayed on the data: Gender should be male or female, not 1 or 2

Tabular Data Processing - Data Transformation

In most system development documents, some fields in the defined database are used to replace characters with certain meanings with numbers.

eg: gender: 1 represents male, 2 represents female;

        In the library management system, the status code of the book: 1 is out, 2 is in the library, 3 is damaged;

        Campus management system, student status code: 1 has enrolled, 2 has not enrolled, 3 is on leave

Two processing methods represented by processing the gender field:

        1. Before the data is transferred, convert it first, and directly modify the attribute value of the data object (it is not recommended if the original data has changed)

        2. Before data transmission, add a new attribute field first, modify the new attribute field, and finally render the new field value

If you want to add, modify and delete operations, 1 and 2 are originally transmitted from the backend, and the sending request should also be 1 and 2, and generally follow the high reusability of the interface, and the sending request is generally Data object, so try not to modify the original data .

 After converting the status code data

<template>
  <div>
    <el-table :data="tableData" height="450" border style="width: 100%">
      <el-table-column prop="id" label="序号"  align="center"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center"> </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="class" label="班级" align="center"> </el-table-column>
      <el-table-column prop="state_text" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          ></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        console.log(res.data);
        if(res.data.status === 200){
          this.tableData = res.data.data
          this.tableData.forEach(item => {
            item.sex === 1 ? item.sex_text = '男' : item.sex_text = '女'
            item.state === '1' ? item.state_text = '已入校' : item.state === '2' ? item.state_text = '未入校' : item.state_text = '休学中'
          })
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style></style>

Realization of front-end paging function

        The data of the paging operation is actually an array, so what are the methods for dividing the data? The core of the different methods of operation is to find the law: each page displays from which data to which data.

1. Find

 2. Copy and import, use after modification

       ① Total number function:

② Pagination rule formula:

        The front end uses the slice method: (current page number - 1) * number of entries per page, current page number * number of entries per page

Slice the data before rendering the data (at this time, the paging numbers are displayed correctly, but the actual paging function has not yet been implemented)

        One: direct binding:

        Two: Use computed properties:

<template>
  <div class="InfoList">
    <!-- <el-table :data="
      tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    " height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
    <el-table
      :data="compData"
      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="number" label="学号" align="center" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" sortable>
      </el-table-column>
      <el-table-column prop="class" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="state_text" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
          ></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"
    >
    </el-pagination>
  </div>
</template>

<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData(){
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      students(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

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

 

       ③ Change the number of items per page (click the page number to jump correctly)

 ps: It is set here that when the number of each item changes, the current page number will return to the first page.

Finally, adjust the style: left alignment, top margin

 Finally InfoList.vue code:

<template>
  <div class="InfoList">
    <!-- <el-table :data="
      tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    " height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
    <el-table
      :data="compData"
      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="number" label="学号" align="center" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" sortable>
      </el-table-column>
      <el-table-column prop="class" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="state_text" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
          ></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"
    >
    </el-pagination>
  </div>
</template>

<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData(){
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      students(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

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

Guess you like

Origin blog.csdn.net/qq_45947664/article/details/127973791
Recommended
Arc Browser for Windows 1.0 officially GA
A programmer born in the 1990s developed a video porting software and made over 7 million in less than a year. The ending was very punishing!
Ranking
1. Select Sort
Create a thread thread
3 press to play ball that reach 6
Programmation CUDA (4) : gestion de la mémoire
SpringBoot database connection pool Druid error
E Diudiu App redesign summary
4EVERLAND Hosting now supports SNS+IPFS
About HTTPS
[vue3+vite+ts+element-plu+sass] uses bug records in sass
Interpretation of HUAWEI CLOUD GaussDB (for Influx): Best Practice Data Modeling
Daily
More
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)

Code World

© 2018 codetd.com