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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
理解Javascript闭包
Nov 01 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
js实现表格筛选功能
Jan 18 Javascript
js实现下一页页码效果
Mar 07 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
用PHP实现文件上传二法
2006/10/09 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
pytorch 常用线性函数详解
2020/01/15 Python
iPython pylab模式启动方式
2020/04/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
职称评定个人总结
2015/03/05 职场文书
婚庆主持词大全
2015/06/30 职场文书
新闻通讯稿模板
2015/07/22 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏