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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
webuploader实现上传图片到服务器功能
Aug 16 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
vue路由分文件拆分管理详解
Aug 13 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
生产车间管理制度
2015/08/04 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书