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 相关文章推荐
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP的explode和implode的使用说明
2011/07/17 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP生成器简单实例
2015/05/13 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python中的集合类型知识讲解
2015/08/19 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Django 路由控制的实现
2019/07/17 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
医学专业应届生的自我评价
2014/02/28 职场文书
本科生自荐信
2014/06/18 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
暖春观后感
2015/06/08 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
《植树问题》教学反思
2016/03/03 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python