VUE进阶（实现左侧菜单的动态加载，数据动态加载）

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	用户点击下一页按钮改变当前页后触发	当前页