zh-E-admin/src/views/admin/user/list.vue

<template>
  <div class="user-list">

      <div class="mb-20 flex-justify-space baC-fff sys-radius-10 box-sizing-border pd-15-10">
        <div class="align-items-center">
            <el-input
              class="input-w-200 mr-10"
              placeholder="请输入查询关键词"
              prefix-icon="el-icon-search"
              v-model="fromData.search">
            </el-input>
            <el-button type="primary" @click="searchFun()">查询</el-button>
        </div>
        <div class="">
          <el-button type="success" @click="add()">新增</el-button>
        </div>
      </div>

      <div class="mb-30">
        <el-table :data="list" stripe >
            <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
            <el-table-column fixed prop="name" label="姓名"></el-table-column>
            <el-table-column prop="id_number" label="身份证号" width="220"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>

            <el-table-column prop="psnId" label="e签宝id" width="320"></el-table-column>
            <el-table-column prop="realnameStatus" label="是否实名">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.realnameStatus == 1" type="success">已实名</el-tag>
                <el-tag v-else type="danger">未实名</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="authorizeUserInfo" label="是否授权">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.authorizeUserInfo == 1" type="success">已授权</el-tag>
                <el-tag v-else type="danger">未授权</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间"></el-table-column>
            <el-table-column fixed='right' prop="" label="编辑">
              <template slot-scope="scope">
                <el-button type="warning" @click="edit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>


      <div class="mb-30 flex-justify-end">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="fromData.page"
          :page-size="10"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

  </div>
</template>

<script>
  import {memberList} from '@/api/member.js'
  export default {
    data(){
      return{
        list:[],
        fromData:{
          page:1,
          search:'',
        },
        total:0,
      }
    },
    mounted(){
      this.getList();
    },
    methods:{
      getList(){
        memberList(this.fromData).then((res)=>{
          if(res.code == 1){
            this.list = res.data.items;
            this.total = res.data.total
          }
        })
      },
      handleCurrentChange(val){
        this.fromData.page = val;
        this.getList();
      },
      searchFun(){
        this.fromData.page = 1;
        this.getList();
      },
      add(){
        this.$router.push({path:'/user/add-edit'})
      },
      edit(item){
        this.$router.push({path:'/user/add-edit',query:{id:item.id}})
      },
    },
  }
</script>

<style scoped lang="scss">
  .user-list{

  }
</style>