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


Posted in Javascript onNovember 04, 2019

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

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

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

先看看效果图

1,首次进来

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

2,查询结果

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

3,再次点击面包屑导航

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

4,查询结果

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

基本的效果是这样的

下面看代码

<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面包屑导航使用扩展详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
You might like
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php实现购物车功能(上)
2020/07/23 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python连接池实现示例程序
2013/11/26 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python爬虫之遍历单个域名
2019/11/20 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
装修设计师求职信
2014/02/26 职场文书
创业融资计划书
2014/04/25 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
七一建党日演讲稿
2014/09/05 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
发票退票证明
2015/06/24 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python