1 页面代码
路径:xxx/src/views/UserList.vue
1.1 html代码
template标签里内容,一般包括导航栏、搜索栏、数据列表、分页栏
注意:冒号开头的标签属性、v-model的标签属性可以直接引用javascript标签里data中定义的变量
<el-input v-model="formInline.username" placeholder="请输入用户名称"></el-input>
上面标签出现了v-model表示绑定了javascript标签里data中定义的变量formInline的username
<el-table size="small" :data="listData">
上面标签出现了冒号开头的标签属性 :data 表示将列表的数据绑定到了javascript标签里data中定义的变量listData
1.1.1 导航栏(面包屑)
/**
* 用户管理菜单——用户管理
*/
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
1.1.2 搜索栏(条件查询)
/**
* 用户管理菜单——用户管理
*/
<template>
<div>
<!-- 面包屑导航 -->
<!-- 搜索筛选 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索:">
<el-input
size="small"
:clearable="true"
v-model="formInline.username"
placeholder="请输入用户名称"
></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button> -->
</el-form-item>
</el-form>
</div>
</template>
1.1.3 数据列表
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading"
border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="username" sortable label="用户名" width="150"></el-table-column>
<el-table-column prop="name" label="用户名称" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdDate" label="创建时间" width="150">
<template slot-scope="scope">
<div>{{scope.row.createdDate|timestampToTime}}</div>
</template>
</el-table-column>
<el-table-column prop="createdBy" label="创建人" width="150"></el-table-column>
<el-table-column prop="modifiedDate" label="修改时间" width="150">
<template slot-scope="scope">
<div>{{scope.row.modifiedDate|timestampToTime}}</div>
</template>
</el-table-column>
<el-table-column prop="modifiedBy" label="修改人" width="150"></el-table-column>
<el-table-column align="center" label="操作" min-width="80">
<template slot-scope="scope">
<el-button icon="el-icon-edit" type="primary" @click="editUser(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
1.1.4 分页栏
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
2 script代码
script标签里的内容,这部分是vue的核心
2.1 导入外部引用
// 请求地址
import { userList, userEdit } from "../../api/userMG";
// 分页组件
import Pagination from "../../components/Pagination";
2.2 数据data模块
export default {
data() {
return {
listData: [], // 分页查询数据
}
}
}
2.3 方法method模块
vue自定义的方法created
created() {
// 表示页面加载后第一时间调用的方法,一般用来初始化列表数据
},
用户自定义方法,必须写在method里面
methods: {
// 获取公司列表
getdata(parameter) {
this.loading = true;
// 调用后端接口
userList(parameter)
.then(res => {
this.loading = false;
this.listData = res.data;
// 分页赋值
this.pageparm.currentPage = this.formInline.page;
this.pageparm.pageSize = this.formInline.limit;
this.pageparm.total = res.total;
})
.catch(err => {
this.loading = false;
this.$message.error("菜单加载失败,请稍后再试!");
});
},
}
3 css代码
style标签里的内容