Vue+iview---从后端获取数据并且渲染到表格上

桃扇骨 2022-03-06 11:24 569阅读 0赞

# 背景 #

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

# 方法介绍 #

##  1.整体介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

##  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 绑定查询的方法 ###

###  2.3 绑定表格 ###

###  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 往表格中添加数据的方法 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

# 总结 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220303/4815c472607241569336c7a1a85f1254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220303/247ba852831b4883a35d9ee0209075f2.png