背景

  订餐系统前端使用的是vue框架，基于iview组件，前后端分离，所以需要从后端获取表格中的数据并且渲染到表格上。

方法介绍

 1.整体介绍

 2.方法介绍

 2.1 时间绑定

		请选择时间段：
        <DatePicker
          type="date"
          placeholder="开始日期"
          style="width:200px;margin-right:5px"
          v-model="proDate"
        ></DatePicker>
        至
        <DatePicker
          type="date"
          placeholder="结束日期"
          style="width:200px;margin-left:5px"
          v-model="laterDate"
        ></DatePicker>

 2.2 绑定查询的方法

		<Button
          type="primary"
          style="margin-left:20px"
          @click="add"
        >查询</Button>

 2.3 绑定表格

<Table
    :columns="columns1"        
	:data="data1"
></Table>

 2.4 添加导入等数据

import axios from "axios";
export default {
  data() {
    return {
      data1: [],
      columns1: [
        {
          title: "未取餐人",
          key: "ownerName"
        },
        {
          title: "未取餐总次数",
          key: "count"
        },
        {
          title: "联系方式",
          key: "owerTel"
        }
      ],
      proDate: "", //绑定开始时间
      laterDate: "", //绑定结束时间
    };
  },

  columns1中的title是表格中要显示的内容，key是从后端查询到的名字，这里一定要绑定正确，否则会查不出来或者表格中的内容错位。

 2.5 时间格式化方法

convertToDate(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },

  如果不进行时间格式化，可能你选中的时间格式和后端返回的时间格式不一致，导致查不出结果。

 2.6 往表格中添加数据的方法

总结

  所有走过的路都是最美的风景，好好总结吧！