1.动态树
- //src/components/LeftNav.vue
-
default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" - active-text-color="#ffd04b" :collapse="collapsed">
-
- "logobox">
-
"logoimg" src="../assets/img/logo.png" alt=""> -
-
-
for="m in menus" :index="'idx_'+m.id" :key="'key_'+m.id"> - "title">
- "m.icon">
- {{m.text}}
-
-
for="m2 in m.modules" :index="m2.url" :key="'key_'+m2.id"> - "m2.icon">
- {{m2.text}}
-
-
-
-
-
- export default {
- data() {
- return {
- collapsed: false,
- menus:[]
- }
- },
- created() {
- this.$root.Bus.$on('aaa', v => {
- this.collapsed = v;
- });
- let url = this.axios.urls.SYSTEM_MENUS;
- this.axios.get(url,{}).then(r => {
- console.log(r);
- this.menus=r.data.rows;
- }).catch(e => {
-
- })
- }
- }
- .el-menu-vertical-demo:not(.el-menu--collapse) {
- width: 240px;
- min-height: 400px;
- }
-
- .el-menu-vertical-demo:not(.el-menu--collapse) {
- border: none;
- text-align: left;
- }
-
- .el-menu-item-group__title {
- padding: 0px;
- }
-
- .el-menu-bg {
- background-color: #1f2d3d !important;
- }
-
- .el-menu {
- border: none;
- }
-
- .logobox {
- height: 40px;
- line-height: 40px;
- color: #9d9d9d;
- font-size: 20px;
- text-align: center;
- padding: 20px 0px;
- }
-
- .logoimg {
- height: 40px;
- }
- //src/router/index.js
- import Vue from 'vue'
- import Router from 'vue-router'
- import HelloWorld from '@/components/HelloWorld'
- import AppMain from '@/components/AppMain'
- import LeftNav from '@/components/LeftNav'
- import TopNav from '@/components/TopNav'
- import Login from '@/views/Login'
- import Register from '@/views/Register'
- import AddBook from '@/views/book/AddBook'
- import BookList from '@/views/book/BookList'
- Vue.use(Router)
-
- export default new Router({
- routes: [{
- path: '/',
- name: 'Login',
- component: Login
- },
- {
- path: '/Register',
- name: 'Register',
- component: Register
- },
- {
- path: '/AppMain',
- name: 'AppMain',
- component: AppMain,
- children: [{
- path: '/LeftNav',
- name: 'LeftNav',
- component: LeftNav
- },
- {
- path: '/TopNav',
- name: 'TopNav',
- component: TopNav
- },
- {
- path: '/book/AddBook',
- name: 'AddBook',
- component: AddBook
- },
- {
- path: '/book/BookList',
- name: 'BookList',
- component: BookList
- }]
- }
- ]
-
- })
- //src/src/view/book/AddBook
-
书籍新增
-
-
- //src/src/view/book/BookList
-
书籍管理
-
-

2.动态表格
- //src/view/book/BookList.vue
- "books" style="padding: 20px;">
-
-
"true" class="demo-form-inline"> -
"书籍名称"> -
"bookname" placeholder="书籍名称"> -
-
-
"primary" @click="onSubmit">查询 -
-
-
-
"tableData" stripe style="width: 100%"> -
"id" label="书籍编号" width="180"> -
-
"bookname" label="书籍名称" width="180"> -
-
"price" label="书记价格"> -
-
"type" label="书记类别"> -
-
-
- "block">
- "demonstration">完整功能
-
@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="400">
-
-
-
-
- export default {
- data() {
- return {
- bookname: "",
- tableData: [],
- rows:10,
- page:1,
- total:0
- }
- },
- methods: {
- query(params) {
- let url = this.axios.urls.BOOK_LIST;
- this.axios.get(url, {
- params: params
- }).then(r => {
- console.log(r);
- this.tableData = r.data.rows;
- this.total=r.data.total;
- }).catch(e => {
- })
- },
- onSubmit() {
- let params = {
- bookname: this.bookname
- }
- this.query(params);
- },
- handleSizeChange(r) {
- //当页大小变化
- console.log("当前页大小为:"+r);
- let params = {
- bookname: this.bookname,
- rows:r,
- page:this.page
- }
- this.query(params);
- },
- handleCurrentChange(p) {
- //当前页码变化
- console.log("当前页码为:"+p);
- let params = {
- bookname: this.bookname,
- rows:p,
- page:this.page
- }
- this.query(params);
- },
- },
- created() {
- this.query({});
- }
- }
-
- //src/componants/AppMain.vue
-
"main-container"> -
"asideClass"> -
-
-
-
"main-header"> -
-
-
"main-center"> -
-
-
-
-
- // 导入组件
- import TopNav from '@/components/TopNav.vue'
- import LeftNav from '@/components/LeftNav.vue'
-
- // 导出模块
- export default {
- components: {
- TopNav,
- LeftNav
- },
- data() {
- return {
- asideClass: 'main-aside'
- }
- },
- created() {
- this.$root.Bus.$on('aaa', v => {
- this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
- })
- }
- };
- .main-container {
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- }
-
- .main-aside-collapsed {
- /* 在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级 */
- width: 64px !important;
- height: 100%;
- background-color: #334157;
- margin: 0px;
- }
-
- .main-aside {
- width: 240px !important;
- height: 100%;
- background-color: #334157;
- margin: 0px;
- }
-
- .main-header,
- .main-center {
- padding: 0px;
- border-left: 2px solid #333;
- }
