vue模拟列表数据

最新推荐文章于 2023-11-17 11:55:05 发布

原创最新推荐文章于 2023-11-17 11:55:05 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

该代码示例展示了如何在Vue中使用ElementUI库创建一个带有折叠菜单、表格和分页的管理界面。数据通过Ajax请求从服务器获取，并填充到表格中，同时实现了菜单的展开与收缩功能。

vue模拟列表数据

<template>
  <div class="home">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside
        width="auto"
        style="background-color: rgb(238, 241, 246); height: 100vh"
      >
        <el-menu
          :default-openeds="['1', '3']"
          style="min-height: 100%; border-right: none"
          class="el-menu-vertical-demo"
          background-color="rgb(48, 65, 86)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse-transition="false"
          :collapse="isCollapse"
        >
          <div style="height: 60px; line-height: 60px; text-align: center">
            <img
              src="../assets/logo.png"
              alt=""
              style="
                width: 20px;
                position: relative;
                top: 5px;
                margin-right: 5px;
              "
            />
            <b style="color: white" v-show="logoTextShow">后台管理系统</b>
          </div>
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i><span>导航一</span></template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i><span>导航二</span></template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i><span>导航三</span></template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header
          style="
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            line-height: 60px;
            display: flex;
          "
        >
          <div style="flex: 1; font-size: 20px">
            <span
              :class="collapseBtnClass"
              style="cursor: pointer"
              @click="handleCollapse"
            ></span>
          </div>
          <el-dropdown style="width: 70px; cursor: pointer">
            <span>王小虎</span>

            <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出logout</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <div style="margin-bottom: 30px">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div style="padding: 10px 0">
            <el-input
              style="width: 200px"
              suffix-icon="el-icon-search"
              placeholder="请输入名称"
            ></el-input>
            <el-input
              style="width: 200px"
              suffix-icon="el-icon-message"
              placeholder="请输入邮箱"
              class="ml-5"
            ></el-input>
            <el-input
              style="width: 200px"
              suffix-icon="el-icon-position"
              placeholder="请输入地址"
              class="ml-5"
            ></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
          </div>
          <div style="margin: 10px 0">
            <el-button type="primary"
              >新增<i
                class="el-icon-circle-plus-outline"
                style="margin-left: 5px"
              ></i
            ></el-button>
            <el-button type="primary"
              >批量删除<i
                class="el-icon-remove-outline"
                style="margin-left: 5px"
              ></i
            ></el-button>
            <el-button type="primary"
              >导入<i class="el-icon-bottom" style="margin-left: 5px"></i
            ></el-button>
            <el-button type="primary"
              >导出<i class="el-icon-top" style="margin-left: 5px"></i
            ></el-button>
          </div>
          <el-table
            :data="tableData"
            border
            stripe
            :header-cell-style="{ background: '#eee' }"
          >
            <el-table-column prop="username" label="姓名" width="140">
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleClick(scope.row)"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="handleClick(scope.row)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
              :page-sizes="[5, 10, 15, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.home {
  height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

<script>
export default {
  name: "HomeView",
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: [], // Array(10).fill(item),
      total: 0,
      isCollapse: false,
      collapseBtnClass: "el-icon-s-fold",
      logoTextShow: true,
      headerCLass: "{background:'#eee'}",
    };
  },
  created() {
    fetch("http://localhost:9090/admin/user/pageLists?pageSize=2&pageNum=2")
      .then((res) => res.json())
      .then((res) => {
        debugger;
        this.tableData = res.pageList;
        this.total = res.total;
      });
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse;

      if (this.isCollapse) {
        // 收缩
        this.collapseBtnClass = "el-icon-s-unfold";
        this.logoTextShow = false;
      } else {
        // 展开
        this.collapseBtnClass = "el-icon-s-fold";
        this.logoTextShow = true;
      }
    },
  },
};
</script>

其中主要部分

  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData:  Array(10).fill(item),
    };
  }