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 jQuery中的DOM操作
Mar 21 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
COM in PHP (winows only)
2006/10/09 PHP
php 数组使用详解 推荐
2011/06/02 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
谈谈React中的Render Props模式
2018/12/06 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
精通CAD能手自荐书
2014/01/31 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
校运会口号
2014/06/18 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
政协工作总结2015
2015/05/20 职场文书
山楂树之恋观后感
2015/06/11 职场文书
反邪教学习心得体会
2016/01/15 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript