admin_operation/src/views/userList/account.vue

<template>
  <div class="app-container">
      <div class="filter-container" style="margin: 10px 0 10px 0">
        <span class="textSpan">客户名称:</span>
        <el-input v-model="body.customerName" style="width:200px;" placeholder="客户名称" size="small" clearable />
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
        <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="handlerAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <!-- 字段信息：客户名称、、账号余额、授信额度、可用额度、操作 -->
        <el-table-column label="客户名称" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="账号余额" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="授信额度" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="可用额度" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import api from '@/api/userList'
export default {
  data() {
    return {
      loading:false,
      tableData:[],
      body:{
        current:1,
        size:10
      }
    }
  },
  methods: {
    // 更具 this.body 重载数据
    reLoad(){
      this.loading = true
      api.account.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },

    // s搜索call
    Search(){
      this.body.current = 1
      this.reLoad()
    },

    // 新增call
    handlerAdd(){

    },

    // 页码
    handleSizeChange(val) {
      this.body.size = val
      this.reLoad()
    },
    // 换页
    handleCurrentChange(val) {
      this.body.current = val
      this.reLoad()
    }
  },

}
</script>

<style>

</style>