本案例是基于Vuex的公共数据库，你在了解本案例之前要了解Vuex的使用方法。
https://www.iviewui.com/components/breadcrumb
打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的。但是我们项目中常常用到单页面查询面包屑导航。小生开始为这个纠结好久。然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法。
先看看效果图
1，首次进来
2，查询结果
3，再次点击面包屑导航
4，查询结果
基本的效果是这样的
下面看代码
<template> <div> <Breadcrumb separator=">" > //面面包屑导航组件，用“>”隔开 <BreadcrumbItem v-for="(item,index) in accountList"> // 用v-for遍历循环账号数组 <span @click="queryAgentMember(item)"> //商品这里放置账号，调用查询函数实现点击账号查询 <Icon v-if="index==0" type="ios-home-outline"></Icon> // v-if判断第一个账号的图标 <Icon v-if="index>0" type="android-person"></Icon> // v-if判断不是第一个账号的图标 <span>{{item}}</span> // 图标后面的账号 </span> </BreadcrumbItem> </Breadcrumb> <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="queryAgentMemberdataList" :columns="tableColumns3"></Table> </div> </template> <script> import { mapActions,mapState } from "vuex"; export default { data () { return { Account:'', //定义一个账号变量 accountList:[], //定义一个数组装账号 queryAgentMemberdataList:[], //这是表格列表数据 } }, methods:{ ...mapActions('account', [ 'queryAgentMemberInfo', ] ), //查询函数 search(acc) { this.time(); if(acc ){ //对函数参数进行判断，在有账号的情况下 this.Account = acc; // 如果有就赋值给Account }else if(this.childAccount === ""){ //继续判断没有下级账号 this.Account = this.userDetail.account; // 如果没有就等于后台返回的账号 if(this.accountList.indexOf(this.userDetail.account)==-1){ // 再一次判断这个账号在不在账号数组里面，这里是不在的情况下 this.accountList.push(this.userDetail.account) // 不在就push到账号数组 } }else { //对函数参数进行判断，在没有账号的情况下 this.Account = this.childAccount } let data = { 'memberAccount':this.Account, 'sort': '1', 'type': '1' }; this.queryAgentMemberInfo(data).then((res) => { this.queryAgentMemberdataList = this.queryAgentMemberInfoList; }) }, // 面包屑导航点击查询实时变更函数 queryAgentMember(account){ let end = this.accountList.indexOf(account); // 定义一个变量等于传入的账号的下标 this.accountList = this.accountList.slice(0,end+1); // 利用这个下标对张海数组进行截取 this.search(account) //调用查询函数更新表格数据 }, }, computed: { ...mapState(['userDetail']), ...mapState( "account",['queryAgentMemberInfoList',]), tableColumns3 () { let columns = []; if (this.showCheckbox) { columns.push({ type: 'selection', align: 'center' }) } if (this.showIndex) { columns.push({ type: 'index', align: 'center' }) } columns.push({ title: '会员账号', sortable: true, render: (h, params) => { if (params.row.account === this.Account) { } return h('Span',{ props: { type: 'text' }, style: { color: '#4ca5e9', cursor: 'pointer' }, on: { // 这里还要对表格账号点击查询进行判断 click:()=>{ //同样的先判断账号数组里面有没有当前查询的账号，这里也是在没有的额情况下 if(this.accountList.indexOf(params.row.account)==-1){ //没有就将当前查询的账号添加到账号数组 this.accountList.push(params.row.account) } this.search(params.row.account); //查询函数 } } },params.row.account) } }); columns.push({ title: '账号名称', key: 'name' }); columns.push({ title: '彩票钱包余额', key: 'accountBalance', sortable: true }); columns.push({ title: '团队人数', key: 'childCount' }); columns.push({ title: '注册时间', key: 'create_Time', sortable: true, width: 200 }); columns.push({ title: '最后登录时间', key: 'last_LoginTime', sortable: true, width: 150 }); columns.push({ title: '下级总额', key: 'childAmount' }); return columns; }, }, watch:{ userDetail(){ this.search() } } } </script>
这里的代码不可以直接使用，但是方法都在，希望读者可以看懂。
以上这篇Vuex,iView UI面包屑导航使用扩展详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: