【Vue-Element-Template】添加自己的列表页面（三）

1、在views目录下新建我们的页面代码

<template>
  <div>
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="查询">
          <el-input
            v-model="formInline.serch"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >查询</el-button>
          <el-button
            type="info"
            @click="binddatas"
          >加载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-container>
        <el-header style="text-align: right; font-size: 12px" />
        <el-main>
          <el-table :data="tableData">
            <el-table-column
              hidden
              prop="id"
              label="ID"
              width="120"
            />
            <el-table-column
              prop="ssn"
              label="订单号"
              width="140"
            />
            <el-table-column
              prop=name"
              label="商户名称"
            />
            <el-table-column
              prop="amount"
              label="金额"
            />
            <el-table-column
              prop="type"
              label="支付方式"
            />
            <el-table-column
              prop="status"
              label="处理状态"
            />
            <el-table-column
              prop="create_date"
              label="创建时间"
            />
            <el-table-column
              prop="processed_date"
              label="处理时间"
            />
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>

import { api_list } from '@/api/mylist'
import { getToken, removeToken } from '@/utils/auth'

export default {
  name: 'List',
  data() {
    return {
      formInline: {
        serch: ''
      },
      tableData: [],
      token: '',
      page_count: -1,
      page_size: 10
    }
  },
  methods: {
    onSubmit() {
      console.log('测试提示1')
    },

    binddatas() {
      console.log('测试提示1')
      const data = {
        token: getToken(),
        amount: 0,
        ssn: '',
        begin_date: '',
        end_date: '',
        status: '',
        page_count: this.page_count,
        page_size: this.page_size
      }
      console.log('测试提示2')
      api_list(data)
        .then((response) => {
          if (response.Code == 10000) {
            console.log('打印单个元素内容:' + response.Result.Data[0])
            this.tableData = response.Result.Data
          } else if (response.Code == 10004) {
            removeToken()
          } else {
            console.log(response.Message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

 

2、在api目录下新建我们的api请求，代码大致如下：

ps：因为在utils中已经封装了对request的请求，所以这里直接导入后使用即可

import request from '@/utils/myrequest'

export function api_recharge_list(data) {
  return request({
    url: '/Recharge/GetRechargeList',
    method: 'post',
    data: {
      token: data.token,
      amount: data.amount,
      recharge_ssn: data.ssn,
      begin_date: data.begin_date,
      end_date: data.end_date,
      status: data.status,
      page_count: data.page_count,
      page_size: data.page_size
    }
  })
}

 

需要注意的问题：因为这里已经是动态请求api 的代码了，前期调试时可在

 data() {

    return {

      formInline: {

        serch: ''

      },

      tableData: [],

      token: '',

      page_count: -1,

      page_size: 10

    }

  }     方法中对tableData数据进行初始化，这样可查看结构上的错误。静态展示没有问题，即可加入api请求对tableData进行动态赋值