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&