Vuex中iView UI面包屑導航怎么用

這篇文章給大家分享的是有關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 === ""){ //繼續判斷沒有下級賬號
     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面包屑導航怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！