vue、ElementUi、vue-router、vue-bus的使用

在工作中由于工作的转变，layui停止了更新公司要求转换前端的技术。经过大家对于浏览器版本和后续代码开发所使用的语言。决定采用vue脚手架来进行开发前端页面。此记录主要是用于学习之中对于常规组件的应用，包括数据表格。分页等

1.在对于数据提交一类的控件输入框等在vue中能有很好的体现，vue中的双向绑定为后续获取数据提交数据进行了很好的帮助，v-model当值改变的时候都会去进行触发。

<template>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-setting"></i>修改密码
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card shadow="hover" class="container">
            <el-row style="padding:0 15%">
                <el-form :model="form">
                    <el-form-item label="旧密码" label-width="100px">
                        <el-input type="text" placeholder="请输入旧密码" v-model="form.newpassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" label-width="100px">
                        <el-input type="text" placeholder="请输入新密码" v-model="form.newpassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" label-width="100px">
                        <el-input type="text" placeholder="请再次输入新密码" v-model="form.newpasswordcfm"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%">
                           确定修改
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>

    </div>
</template>

<script>
    export default {
        name: "pwdsetting",
        data(){
            return {
                form:{
                    oldpassword:'',
                    newpassword:'',
                    newpasswordcfm:''
                }
            }
        }
    }
</script>

<style scoped>

</style>

2.下拉组件的应用在vue中只需要采用v-for等循环就可以对option来进行渲染

  <el-form-item  label="选择币种" label-width="100px" >
                        <el-select  style="width: 100%"  v-model="monetype">
                            <el-option v-for="item in form.monetype" :key="item.id" :label="item.name" :id="item.id"></el-option>
                        </el-select>
                    </el-form-item>

3.数据表格，基本功能分页实现，total这个是数据的总数，page-size这个是当前页面需要显示多少条数据，current-page这个是页码，current-change这个是当你点击页数的时候会回调这个函数进行数据的重新渲染，在进行数据重新渲染的时候千万要注意this.$set(this.query,'currentPage' , val);要这么调用vue，而不是通过this.query.currentPage = val来进行渲染

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb>
                <el-breadcrumb-item>
                    <i class="el-icon-baseball"></i>资金持仓页面
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="container">
            <div>
                <el-breadcrumb-item style="margin-bottom: 20px">
                    <span>可用资金:</span>
                    <span>{{balance}}</span>
                </el-breadcrumb-item>
            </div>

                <el-table :data="tableData.slice((query.currentPage - 1) * query.pageSize,query.currentPage * query.pageSize)" style="width: 100%" border :cell-style="cellStyle" @sort-change="changeTabSort">
                <el-table-column prop="code" label="代码" width="180"/>
                <el-table-column prop="name" label="名称" width="180"/>
                <el-table-column prop="count" label="股票数量"/>
                <el-table-column prop="cost" label="总投入"/>
                <el-table-column label="成本"/>
            </el-table>
            <div class="pagination">
                <el-button round type="primary" size="mini" style="margin-top: 2px;float: right" icon="el-icon-refresh" @click=""></el-button>
                <el-pagination  background layout="total,prev,pager,next" :current-page="query.currentPage" :page-size="query.pageSize" :total="dataTotalCount" @current-change="handlerPageChange"/>
            </div>

        </el-card>

    </div>
</template>

<script>
    export default {
        name: "Dashboard",
        data(){
            return {
                tableData: [{
                    code: '60025',
                    name: '华智水电',
                    count: 100,
                    cost:20
                }, {
                    code: '50023',
                    name: '浦发银行',
                    count: 100,
                    cost:20
                }, {
                    code: '10001',
                    name: '贵州茅台',
                    count: 100,
                    cost:20
                }, {
                    code: '20032',
                    name: '华联集团',
                    count: 100,
                    cost:20
                }],
                balance:200,
                dataTotalCount:4,//总数
                query:{
                    currentPage:1,//当前页码
                    pageSize:2//每页显示多少条
                }

            }
        },
        methods:{
            handlerPageChange(val){
               this.$set(this.query,'currentPage' , val);
            },
            changeTabSort(column){
                if (column.order == 'descending'){
                    this.tableData = this.tableData.sort((a,b)=>{
                        b[column.prop] - a[column.prop]
                    })
                } else{
                    this.tableData = this.tableData.sort((a,b)=>{
                        a[column.prop] - b[column.prop]
                    })
                }
            },
            cellStyle({row,cloumn,rowIndex,cloumnIndex}){
                return "padding:2px"
            }
        }
    }
</script>

<style scoped>

</style>

4.包括主键之间消息的传递这个时候就需要用到了vue-bus。他能进行组件和组件之间的交互当某个组件发生了改变的时候这个时候就可以通过这个框架去发送通知告知其他组件，有点类似于MQ的消息订阅模式。这里是按钮点击事件触发通知了其他组件进行对应的显示

<template>
    <div class="header">
        <!--折叠按钮-->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i  v-else class="el-icon-s-unfold"></i>
        </div>
        <!--LOGO-->
        <div class="logo">证券交易系统</div>
        <!--用户信息和下拉菜单-->
        <div class="header-right">
            <div class="header-user-con">
                <!--在ElementsUI里下拉菜单-->
                <el-dropdown class="user-name" trigger="click">
                <span class="el-dropdown-link">
                    {{username}}
                    <i class="el-icon-caret-bottom"></i>
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                username:"guest",
                collapse:false
            }
        },methods:{
            collapseChage(){
                this.collapse = !this.collapse
                /*
                * 点击状态往告诉其他路由我
                * 现在是一个什么样的状态
                * */
                this.$bus.emit('collapse', this.collapse);
            }
        }
    }
</script>

<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #fff;
    }

    .collapse-btn {
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 70px;
    }

    .header .logo {
        float: left;
        width: 250px;
        line-height: 70px;
    }

    .header-right {
        float: right;
        padding-right: 50px;
    }

    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }

    .user-name {
        margin-left: 10px;
    }

    .user-avator {
        margin-left: 20px;
    }

    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }
</style>

其他组件的接收传递过来的数据this.$bus.on 和this.$bus.off必须是成对出现的created这个是vue的生命周期当创建完毕的时候回调，beforeDestroy当销毁了回调

<template>
    <div class="sidebar">
        <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="collapse"
                background-color="#324157"
                text-color="#bfcbd9"
                active-text-color="#20a0ff"
                unique-opened
                router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                    v-if="subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                        v-for="(threeItem,i) in subItem.subs"
                                        :key="i"
                                        :index="threeItem.index"
                                >{{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                    v-else
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Sidebar",
        data(){
            return{
                collapse:false,
                items: [
                    {
                        icon: 'el-icon-pie-chart',
                        index: 'dashboard',
                        title: '资金股份'
                    },
                    {
                        icon: 'el-icon-s-order',
                        index: 'buy',
                        title: '买入'
                    },
                    {
                        icon: 'el-icon-sell',
                        index: 'sell',
                        title: '卖出'
                    },
                    {
                        icon: 'el-icon-search',
                        index: '3',
                        title: '查询',
                        subs: [
                            {
                                index: 'orderquery',
                                title: '当日委托'
                            },
                            {
                                index: 'tradequery',
                                title: '当日成交'
                            },
                            {
                                index: 'hisorderquery',
                                title: '历史委托'
                            },
                            {
                                index: 'histradequery',
                                title: '历史成交'
                            },
                        ]
                    },

                    {
                        icon: 'el-icon-bank-card',
                        index: '4',
                        title: '银证业务',
                        subs: [
                            {
                                index: 'transfer',
                                title: '银证转账'
                            },
                            {
                                index: 'transferquery',
                                title: '转账查询'
                            },
                        ]
                    },
                    {
                        icon: 'el-icon-setting',
                        index: 'pwdsetting',
                        title: '修改密码'
                    },
                ]
            }
        },
        computed:{
            /*当前url发生改变绑定路径，当url发生变化就发生变化*/
            onRoutes(){
                return this.$route.path.replace('/','')
            },
        },
            /*
            * 订阅消息，当收到了消息的时候需要做出什么样的处理回调。
            * */
            created(){
                this.$bus.on("collapse",msg =>{
                    this.collapse =msg;
                    /*让主页面来处理这个折叠的消息*/
                    this.$bus.emit('collapse-conetent',msg)
                })
            },
            //当前实例销毁
            beforeDestroy(){
                this.$bus.off('collapse',msg =>{
                    this.collapse =msg;
                    /*让主页面来处理这个折叠的消息*/
                    this.$bus.emit('collapse-conetent',msg)
                })
            }

    }
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;


    .el-menu-item {
        min-width: 150px;
    }

    li {
        text-align: left;
    }
    .el-tooltip {
        width: auto ! important;
    }


    /*下拉导航菜单多出1px*/
    .el-menu {
        border-right-width: 0;
    }

    .el-menu--collapse{
        width: auto ! important;
    }
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 150px;
    }

    .sidebar > ul {
        height: 100%;
    }

</style>