面包屑的实现+tag功能实现+form表单

一面包屑实现

打开VC/后台管理文件夹

在store/tab.js页面：

在CommonAside页面添加红方框代码：

CommonHeader页面添加红方框代码：

二实现Tag功能

效果:点击aside每一项目对应在main页面产生tag，同时路由跳转

实现：

1）创建CommonTag页面

<template><div class="tabs"><el-tag v-for="(tag,index) in tags" :key="tag.name" :closable="tag.name !=='home'" :effect="$route.name===tag.name?'dark':'plain'" @click="changeMenu(tag)" @close="handleClose(tag,index)"size="small">{{tag.label}}</el-tag></div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {name:'CommonTag',data(){return{}},computed:{...mapState({tags:state=>state.tab.tabsList})},methods:{...mapMutations({close:'closeTag'}),changeMenu(item){this.$router.push({name:item.name})},handleClose(tag,index){const length=this.tags.length-1this.close(tag)//  点击删除时与我们聚焦点焦点不一致则不用改变当前聚焦的焦点if(tag.name!==this.$route.name){return;}//   点击的时最右侧tag，向左跳转if(index===length){this.$router.push({name:this.tags[index-1].name})}else{// 在中间位置，应该向右跳转this.$router.push({name:this.tags[index].name})}}}
}
</script>
<style lang="less" scoped>
.tabs{padding:20px;.el-tag{margin-right:15px;cursor:pointer;}
}
</style>

store/tab.js页面添加：

2）在Main.vue页面引入

三实现form表单

（1）效果：点击新增按钮出现dialog，并获取到添加的数据输入到控制台

实现：

1）创建CommonForm页面：

<template><el-form ref="form" label-width="100px" :model="form" :inline="inline"><el-form-item v-for="item in formLabel" :key="item.label" :label="item.label"><el-inputv-if="item.type === 'input'":placeholder="'请输入' + item.label"v-model="form[item.model]"></el-input><el-switch v-if="item.type === 'switch'"  v-model="form[item.model]"></el-switch><el-date-pickerv-if="item.type === 'date'"type="date"value-format="yyyy-MM-dd"placeholder="选择日期"v-model="form[item.model]"></el-date-picker><el-selectv-if="item.type === 'select'"placeholder="请选择"v-model="form[item.model]"><el-optionv-for="item in item.opts":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item><slot></slot></el-form-item></el-form>
</template>
<script>export default {name: 'CommonForm',props: {formLabel: Array,form: Object,inline: Boolean},data () {return {}}
}
</script>

2）在views/User/index.vue页面输入代码

<template><div class="manage"><!-- dialog框结构 --><el-dialog:title="operaType==='add'?'新增用户':'更新用户'":visible.sync="isShow" ><common-form:formLabel="opertateFormLabel":form="operateForm":inline="true"ref="form"></common-form><div slot="footer" class="dialog-footer"><el-button @click="isShow=false">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></el-dialog><!-- tab上方 --><div class="manage-header"><el-button type="primary" @click="addUser">+新增</el-button>      <!-- 搜索框 --><common-form:formLabel="formLabel":form="searchForm":inline="true"ref="form" >      <el-button type="primary" @clcik="getList">搜索</el-button>   </common-form></div></div>
</template>
<script>
import CommonForm from '../../components/CommonForm.vue'
export default {name:'User',components:{CommonForm},data(){return{   operaType:'add',isShow:false,opertateFormLabel: [{model: 'name',label: '姓名',type: 'input'},{model: 'age',label: '年龄',type: 'input'},{model: 'sex',label: '性别',type: 'select',opts: [{label: '男',value: 1},{label: '女',value: 0}]},{model: 'birth',label: '出生日期',type: 'date'},{model: 'addr',//数据label: '地址',type: 'input'}],operateForm: {name: '',addr: '',age: '',birth: '',sex: ''},// 搜索框formLabel: [{model: "keyword",label: '',type: 'input'}],searchForm:{keyword: ''},}},methods:{// 点击确定confirm(){if(this.opeateType==='edit'){this.$http.post('/user/edit',this.operateForm).then(res=>{console.log(res)this.isShow=false})}else{this.$http.post('/user/add',this.operateForm).then(res=>{console.log(res)this.isShow=false})}},addUser(){this.isShow=truethis.opeateType="add"this.operateForm= {name: '',addr: '',age: '',birth: '',sex: ''}},getList(){},}
}
</script>
<style lang="less" scoped>
/* 让新增与搜索按钮位于同行两侧中间 */
.manage-header{display:flex;justify-content:space-between;align-items:center;
}
</style>

3）在api/mock.js页面添加

import Mock from 'mockjs'
import userApi from './mockServerData/user'
//          url地址        回调函数返回具体的数据
Mock.mock(/user\/add/,'post',userApi.createUser)
Mock.mock(/user\/edit/,'post',userApi.updateUser)

前提：安装了mock、axios并且在main.js引入

4）在api/mockServerData/user.js页面

import Mock from 'mockjs'let List = []
const count = 200
export default {/*** 获取列表* 要带参数 name, page, limt; name可以不填, page,limit有默认值。* @param name, page, limit* @return {{code: number, count: number, data: *[]}}*//*** 增加用户* @param name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/createUser: config => {const { name, addr, age, birth, sex } = JSON.parse(config.body)console.log(JSON.parse(config.body))List.unshift({id: Mock.Random.guid(),name: name,addr: addr,age: age,birth: birth,sex: sex})return {code: 20000,data: {message: '添加成功'}}},/*** 修改用户* @param id, name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/updateUser: config => {const { id, name, addr, age, birth, sex } = JSON.parse(config.body)const sex_num = parseInt(sex)List.some(u => {if (u.id === id) {u.name = nameu.addr = addru.age = ageu.birth = birthu.sex = sex_numreturn true}})return {code: 20000,data: {message: '编辑成功'}}}
}

(2)实现tab，让编辑、删除、新增、搜索改变表格

步骤：

1）创建CommonTab页面

<template><div class="common-table"><el-table :data="tableData" height="90%" stripe><el-table-columnshow-overflow-tooltipv-for="item in tableLabel":key="item.prop":label="item.label":width="item.width ? item.width : 125"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row[item.prop] }}</span></template>    </el-table-column><el-table-column label="操作" min-width="180"><template slot-scope="scope"><!-scope.row得到tab表格这一行数据--><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><el-paginationclass="pager"layout="prev, pager, next":total="config.total":current-page.sync="config.page"@current-change="changePage":page-size="20"></el-pagination></div>
</template>
<script>export default {name: 'CommonTable',props: {tableData: Array,tableLabel: Array,config: Object},data() {return {}},methods: {handleEdit(row) {this.$emit('edit', row)},handleDelete(row) {//子组件向父组件（User/index.vue传数据）this.$emit('del', row)},changePage(page) {this.$emit('changePage', page)}}
}
</script>
<style lang="less" scoped>
.common-table {height: calc(100% - 62px);background-color: #fff;position: relative;.pager {position: absolute;bottom: 0;right: 20px}
}
</style>

2）在views/User/index.vue页面添加代码：

。

。。在views/User/index.vue页面的data中添加

 tableData: [],tableLabel: [{prop: "name",label: "姓名"},{prop: "age",label: "年龄"},{prop: "sexLabel",label: "性别"},{prop: "birth",label: "出生日期",width: 200},{prop: "addr",label: "地址",width: 320}],config: {page: 1,total: 30}}

。。。api/mockServerData/user.js完整代码：

import Mock from 'mockjs'// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {const search = url.split('?')[1]if (!search) {return {}}return JSON.parse('{"' +decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}')
}let List = []
const count = 200for (let i = 0; i < count; i++) {List.push(Mock.mock({id: Mock.Random.guid(),name: Mock.Random.cname(),addr: Mock.mock('@county(true)'),'age|18-60': 1,birth: Mock.Random.date(),sex: Mock.Random.integer(0, 1)}))
}export default {/*** 获取列表* 要带参数 name, page, limt; name可以不填, page,limit有默认值。* @param name, page, limit* @return {{code: number, count: number, data: *[]}}*/getUserList: config => {const { name, page = 1, limit = 20 } = param2Obj(config.url)console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)const mockList = List.filter(user => {if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return falsereturn true})const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))return {code: 20000,count: mockList.length,list: pageList}},/*** 增加用户* @param name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/createUser: config => {const { name, addr, age, birth, sex } = JSON.parse(config.body)console.log(JSON.parse(config.body))List.unshift({id: Mock.Random.guid(),name: name,addr: addr,age: age,birth: birth,sex: sex})return {code: 20000,data: {message: '添加成功'}}},/*** 删除用户* @param id* @return {*}*/deleteUser: config => {const { id } = param2Obj(config.url)if (!id) {return {code: -999,message: '参数不正确'}} else {List = List.filter(u => u.id !== id)return {code: 20000,message: '删除成功'}}},/*** 批量删除* @param config* @return {{code: number, data: {message: string}}}*/batchremove: config => {let { ids } = param2Obj(config.url)ids = ids.split(',')List = List.filter(u => !ids.includes(u.id))return {code: 20000,data: {message: '批量删除成功'}}},/*** 修改用户* @param id, name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/updateUser: config => {const { id, name, addr, age, birth, sex } = JSON.parse(config.body)const sex_num = parseInt(sex)List.some(u => {if (u.id === id) {u.name = nameu.addr = addru.age = ageu.birth = birthu.sex = sex_numreturn true}})return {code: 20000,data: {message: '编辑成功'}}}
}

。。。。在api/axios.js对axios二次封装：

import axios from 'axios'
import config from '../config'const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.proclass HttpRequest {constructor (baseUrl) {this.baseUrl = baseUrl}getInsideConfig() {const config = {baseUrl: this.baseUrl,header: {}}return config}interceptors (instance) {// 添加请求拦截器instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据做点什么console.log(response)return response;}, function (error) {console.log(error, 'error')// 对响应错误做点什么return Promise.reject(error);});}request(options) {const instance =  axios.create()options = { ...this.getInsideConfig(), ...options }this.interceptors(instance)return instance(options)}
}export default new HttpRequest(baseUrl)

。。。。。api/data.js页面:

import axios from './axios'
export const getUser=(params)=>{return axios.request({url:'/user/getUser',method:'get',params})
}

。。。。。。mock.js页面原有基础上添加如下代码：


Mock.mock(/user\/getUser/,'get',userApi.getUserList)
Mock.mock(/user\/del/, 'post', userApi.deleteUser)

。。。。。。。在User/index.vue页面的引入

import { getUser } from '../../../api/data'

。。。。。。。。。在User/index.vue页面的methods引入

 editUser(row) {this.operateType = 'edit'this.isShow = truethis.operateForm = row},delUser (row) {this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确认",cancelButtonText: "取消",type: "warning"}).then(() => {const id = row.idthis.$http.post("/user/del", {params: { id }}).then(() => {this.$message({type: 'success',message: '删除成功'})this.getList()})})},getList(name = '') {this.config.loading = truename ? (this.config.page = 1) : ''getUser({page: this.config.page,name}).then(({ data: res }) => {console.log(res, 'res')this.tableData = res.list.map(item => {item.sexLabel = item.sex === 0 ? "女" : "男"return item})this.config.total = res.countthis.config.loading = false})}},created() {this.getList()}

。。。。。。。。。。。在在User/index.vue页面的methods的confirm方法加上红框代码

完整User/index.vue页面

<template><div class="manage"><el-dialog:title="operateType === 'add' ? '新增用户' : '更新用户'":visible.sync="isShow"><common-form:formLabel="opertateFormLabel":form="operateForm":inline="true"ref="form"></common-form><div slot="footer" class="dialog-footer"><el-button @click="isShow = false">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></el-dialog><div class="manage-header"><el-button type="primary" @click="addUser">+ 新增</el-button><common-form:formLabel="formLabel":form="searchFrom":inline="true"ref="form"><el-button type="primary" @click="getList(searchFrom.keyword)">搜索</el-button></common-form></div><common-table:tableData="tableData":tableLabel="tableLabel":config="config"@changePage="getList()"@edit="editUser"@del="delUser"></common-table></div>
</template>
<script>
import CommonForm from '../../components/CommonForm.vue'
import CommonTable from '../../components/CommonTable.vue'
import { getUser } from '../../../api/data'
export default {name: 'User',components: {CommonForm,CommonTable},data () {return {operateType: 'add',isShow: false,opertateFormLabel: [{model: 'name',label: '姓名',type: 'input'},{model: 'age',label: '年龄',type: 'input'},{model: 'sex',label: '性别',type: 'select',opts: [{label: '男',value: 1},{label: '女',value: 0}]},{model: 'birth',label: '出生日期',type: 'date'},{model: 'addr',label: '地址',type: 'input'}],operateForm: {name: '',addr: '',age: '',birth: '',sex: ''},formLabel: [{model: "keyword",label: '',type: 'input'}],searchFrom:{keyword: ''},tableData: [],tableLabel: [{prop: "name",label: "姓名"},{prop: "age",label: "年龄"},{prop: "sexLabel",label: "性别"},{prop: "birth",label: "出生日期",width: 200},{prop: "addr",label: "地址",width: 320}],config: {page: 1,total: 30}}},methods: {confirm() {if (this.operateType === 'edit') {this.$http.post('/user/edit', this.operateForm).then(res => {console.log(res)this.isShow = falsethis.getList()})} else {this.$http.post('/user/add', this.operateForm).then(res => {console.log(res)this.isShow = falsethis.getList()})}},addUser () {this.isShow = truethis.operateType = 'add'this.operateForm = {name: '',addr: '',age: '',birth: '',sex: ''}},editUser(row) {this.operateType = 'edit'this.isShow = truethis.operateForm = row},delUser (row) {//这里运用了element-UI组件的MessageBoxthis.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确认",cancelButtonText: "取消",type: "warning"}).then(() => {const id = row.idthis.$http.post("/user/del", {params: { id }}).then(() => {this.$message({type: 'success',message: '删除成功'})this.getList()})})},getList(name = '') {this.config.loading = truename ? (this.config.page = 1) : ''getUser({page: this.config.page,name}).then(({ data: res }) => {console.log(res, 'res')this.tableData = res.list.map(item => {item.sexLabel = item.sex === 0 ? "女" : "男"return item})this.config.total = res.countthis.config.loading = false})}},created() {this.getList()}
}
</script>
<style lang="less" scoped>
.manage-header {display: flex;justify-content: space-between;align-items: center;
}
</style>

注意：要在main.js页面引入这两个（为了删除做准备）