vue element ui 账号列表模板，记录一下，方便后期复用。

/**
* @Author: 858834013@qq.com
* @Name: childAccountManagement
* @Date: 2022-05-04
* @Desc: 子账号列表
*/
<template>
  <div class="bodyMain">
    <div class="option mb20">
      <add @getdata="getList">
        <el-button class="mr20" type="success" size="small">新增人员</el-button>
      </add>
      <el-button type="primary" size="small" @click="getList()">刷新</el-button>
    </div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="index" label="序号"></el-table-column>
      <el-table-column prop="nickName" label="用户名"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <div class="operation">
            <changeRole :id="scope.row.id" @getdata="getList">
              <el-button type="primary" plain size="small">更改角色</el-button>
            </changeRole>
            <deleteUser :id="scope.row.id" @getdata="getList"></deleteUser>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        :background="true"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import add from './account/add'
import deleteUser from '@/views/system/account/deleteUser'
import changeRole from '@/views/system/account/changeRole'
import { findAdminList } from '@/api/user'

export default {
  components: {
    add,
    deleteUser,
    changeRole
  },
  data() {
    return {
      pageNum: 1,
      total: 0,
      List: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    },
    getList() {
      var that = this
      var params = {
        pageNum: this.pageNum,
        pageSize: 10,
        status: '0'
      }
      findAdminList(params).then(function(res) {
        if (res.code === 200) {
          that.List = res.data.list
          that.total = res.data.total
          that.List.forEach((element, i) => {
            that.List[i].index = (that.pageNum - 1) * 10 + i + 1
          })
        } else {
          console.log('查询失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  padding-top: 20px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.operation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>