这里写目录标题
1.实现左侧菜单动态加载
1.首先添加模板到组件里面
<el-menu>
<el-submenu index="" key="">
<template slot="title">
<i class=""></i>
<span></span>
</template>
<el-menu-item index="" key="">
<i class=""></i>
<span></span>
</el-menu-item>
</el-submenu>
</el-menu>
2.将向后台发送axios请求,获取菜单数据
let url = this.axios.urls.SYSTEM_MENU
this.axios.get(url, {}).then(resp => {
console.log(resp);
this.menus = resp.data.rows;
}).catch(err => {
console.log(err);
})
3.使用v-for
将数据放上去
<el-submenu v-for="m in menus" :index="m.url+m.id" :key="'key_'+m.id">
<template slot="title">
<i :class="m.icon"></i>
<span>{{m.text}}</span>
</template>
<el-menu-item v-for="m2 in m.modules" :index="m2.url+m2.id" :key="'key_'+m2.id">
<i :class="m.icon"></i>
<span>{{m.text}}</span>
</el-menu-item>
</el-submenu>
2.点击书籍管理,实现数据加载
2.1.入门示例
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
2.2.Table表格基本属性
属性 | 说明 |
---|---|
data | 要显示的数据 |
height | Table 的高度,默认为自动高度。 |
max-height | Table 的最大高度。 |
stripe | 是否为斑马纹 table |
border | 是否带有纵向边框 |
size | Table 的尺寸。medium / small / mini |
fit | 列的宽度是否自撑开,默认true |
更多Table表格属性请查看官网信息。
2.3.Table表格列属性
属性 | 说明 |
---|---|
type | 对应列的类型(selection/index/expand)。selection 则显示多选框;index 则显示该行的索引(从 1 开始计算);expand 则显示为一个可展开的按钮 |
index | 如果设置了 type=index ,可以通过传递 index 属性来自定义索引 |
column-key | column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 |
label | 显示的标题 |
prop | 对应列内容的字段名,也可以使用 property 属性 |
width | 对应列的宽度 |
min-width | 对应列的最小宽度,与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 |
更多Table表格列属性请查看官网信息。
2.4.综合案例
2.4.1.自定义索引
列表的第一列为序号,为保护数据信息,防止恶意爬虫,不能把后端给的id直接显示,应该显示行号
<el-table :data="result" style="width: 100%;" :border="true" max-height="390">
<el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
...
</el-table>
<script>
export default {
name:'BookList',
data:function(){
page:1, //当前页码
rows:10 //每页条数
},
methods:{
//自定义索引
indexMethod: function(index) {
return (this.page - 1) * this.rows + (index + 1);
}
}
}
</script>
2.4.2.查询展示
搜索栏定义
<!--搜索栏-->
<el-form :inline="true" class="form-search">
<el-form-item label="书本名称">
<el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
</el-form-item>
</el-form>
查询事件定义
//数据查询
query: function(page) {
if(null!=page)
this.page=page;
var params = {
bookname: this.bookname,
page: this.page,
rows: this.rows
}
//console.log(params);
var url = this.axios.urls.BOOK_QUERY_PAGER;
this.axios.post(url, params).then(resp => {
//console.log(resp);
//将后台的查询结果集赋值给this.result属性,通过数据双向绑定实现效果展示
this.result = resp.data.rows;
}).catch({});
}
2.4.3.插槽
在table组件中通常使用slot-scope(作用域插槽)来实现数据传递的需求。父组件设置列表数据,传递给子组件,子组件渲染 table 表格;同时子组件中数据变动,也可以传递到父组件中形成数据改变。
作用域插槽的目的是解决父组件、子组件、插槽之间的数据通讯的问题。
<el-table :data="tableData" style="width: 100%"
<el-table-column label="操作" min-width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
slot-scope="scope"就是子组件传递出来的数据集合,包含row、column、$index等属性;类似将每一行的row对象封装到槽中,之后直接从scope中获取row对象信息即可。
3.分页查询
<!--分页组件-->
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<script>
export default {
name: "BookList",
data:function(){
return {
page:1, //当前页码
rows:10, //每页条数
total:0 //总记录数
}
},
methods:{
//每页显示条数改变事件
handleSizeChange: function(row) {
console.log(row);
},
//当前页码改变事件
handleCurrentChange: function(page) {
console.log(page);
}
}
}
</script>
分页组件属性介绍
参数 | 说明 |
---|---|
small | 是否使用小型分页样式,默认:false |
background | 是否为分页按钮添加背景色,默认:false |
page-size | 每页显示条目个数,支持 .sync 修饰符,默认:10 |
total | 总条目数 |
current-page | 当前页数,支持 .sync 修饰符,默认:1 |
layout | 组件布局,子组件名用逗号分隔,默认:‘prev, pager, next, jumper, ->, total’ |
page-sizes | 每页显示个数选择器的选项设置,默认:[10, 20, 30, 40, 50, 100] |
更多Pagination分页组件属性请查看官网信息。
分页组件事件介绍
事件 | 说明 | 回调函数 |
---|---|---|
size-change | pageSize 改变时会触发 | 每页条数 |
current-change | currentPage 改变时会触发 | 当前页 |
prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |