yfadmin_web/src/views/system/Index.vue

<style lang="scss">
.apply {
  .filter {
    background: #fff;
    padding: 20px 20px 10px;
    border: 1px solid #ededed;
    border-radius: 2px;
    margin-bottom: 10px;
    margin-top: 10px;
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-input,
    .el-select {
      width: 150px;
    }
  }
  thead {
    th {
      background: #eee;
    }
  }
}
</style>
<template>
  <section class="apply">
    <p>系统管理 > 账号管理</p>
    <div class="filter">
      <el-form label-width="80px" :inline="true" size="small">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户/姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary">新增账号</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="table" :data="list" border style="width: 100%">
      <el-table-column type="selection" fixed="left" width="55"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="permission" label="权限"></el-table-column>
      <el-table-column prop="date" label="创建时间"></el-table-column>
      <el-table-column prop="zip" width="300" label="操作">
        <template>
          <el-button size="mini" type="warning">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="pageButton" :total="total" @pageChange="gopage" />
  </section>
</template>
<script>
import Page from "../../components/Page";
export default {
  name: "account",
  components: {
    Page
  },
  data() {
    return {
      form: { name: "" },
      total: 1,
      list: [
        {
          account: "admin",
          name: "肖小肖",
          permission: "内容管理，培训管理",
          date: "2020-05-02 12:00:00"
        }
      ]
    };
  },
  methods: {},
  created() {}
};
</script>