Vuex,iView UI面包屑导航使用扩展详解

本案例是基于Vuex的公共数据库，你在了解本案例之前要了解Vuex的使用方法。

https://www.iviewui.com/components/breadcrumb

打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的。但是我们项目中常常用到单页面查询面包屑导航。小生开始为这个纠结好久。然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法。

先看看效果图

1，首次进来

2，查询结果

3，再次点击面包屑导航

4，查询结果

基本的效果是这样的

下面看代码

<template>
 <div class="members">
     <Breadcrumb separator=">" >   //面面包屑导航组件，用“>”隔开
      <BreadcrumbItem  v-for="(item,index) in accountList"> // 用v-for遍历循环账号数组
        <span class="select_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 class="table_a" :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 === ""){ //继续判断没有下级账号								 
 1/3    1 2 3 下一页 尾页