index.vue:
<template>
<div>
<el-row class="container">
<el-col :span="24" class="topbar-wrap">
<div class="topbar-logo topbar-btn">
<a href="/"><img src="../assets/logo.png"></a>
</div>
<div class="topbar-logos">
<a href="/"><img src="../assets/logotxt.png"></a>
</div>
<div class="topbar-title">
<span></span>
</div>
<el-dropdown class="dropdown">
<span class="el-dropdown-link">
<i class="iconfont"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item></el-dropdown-item>
<el-dropdown-item></el-dropdown-item>
<el-dropdown-item></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="24" class="main">
<el-menu
router
:default-active="this.$router.path"
class="el-menu-vertical-demo"
>
<el-menu-item index="/">
<i class="iconfont"></i>
<span slot="title"></span>
</el-menu-item>
<el-menu-item index="/userlist">
<i class="iconfont"></i>
<span slot="title"></span>
</el-menu-item>
<el-submenu index="/book">
<template slot="title">
<i class="iconfont white"></i>
<span slot="title" class="white"></span>
</template>
<el-menu-item-group>
<el-menu-item index="/book/list"></el-menu-item>
<el-menu-item index="/book/category"></el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="/set">
<template slot="title">
<i class="iconfont"></i>
<span slot="title" class="white"></span>
</template>
<el-menu-item-group>
<el-menu-item index="/set/personinfo"></el-menu-item>
<el-menu-item index="/set/changepwd"></el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
name: "Home"
}
}
}
</script>
<style lang="scss" scoped>
</style>
userList.vue:
<template>
<el-row class="wrap">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: "/" }"></el-breadcrumb-item>
<el-breadcrumb-item></el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" class="warp-min" v-loading="loading" element-loading-text=""
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="formInline" class="demo-form-inline" align="left">
<el-input v-model="formInline.user" placeholder="//" style="min-width: 240px;"></el-input>
<el-button type="primary" @click="onSubmit"></el-button>
</el-form>
</el-col>
<el-table
:data="users"
highlight-current-row
v-loading="loading"
align="center">
<el-table-column
prop="name"
label=""
width="120"
sortable>
</el-table-column>
<el-table-column
prop="nickname"
label=""
width="120"
sortable>
</el-table-column>
<el-table-column
prop="sex"
label=""
width="100"
sortable>
</el-table-column>
<el-table-column
prop="email"
label=""
width="160"
sortable>
</el-table-column>
<el-table-column
prop="address"
label=""
sortable>
</el-table-column>
</el-table>
</el-col>
</el-row>
</template>
<script>
export default {
name: "UserList",
data() {
return {
loading: false,
formInline: {
user: ""
},
users: [{
nickname: "",
name: "",
sex: "",
email: "chunzhou@163.com",
address: " 1518 "
}, {
nickname: "",
name: "",
sex: "",
email: "chunzhou@163.com",
address: " 1518 "
}, {
nickname: "",
name: "",
sex: "",
email: "chunzhou@163.com",
address: " 1518 "
}, {
nickname: "",
name: "",
sex: "",
email: "chunzhou@163.com",
address: " 1518 "
}]
}
},
methods: {
onSubmit() {
console.log("submit!");
}
}
}
</script>
<style lang="scss" scoped>
.demo-form-inline{
margin-top: 20px;
}
.el-input{
width: 10%
}
</style>
index.vue:
how to solve