精华内容
下载资源
问答
  • 如何增加筛选项目
    千次阅读
    2021-03-09 17:08:16

    vue项目做的一个“花名册”页面,从“花名册”页面可以点击某一个人的名字,进入这个人的信息详情表格页面,而且这个人的信息详情页面中有一个“直属上级”字段时可以点击跳转的,点击以后跳转到该汇报人的信息详情页面,汇报人里还有汇报人,以此类推,大概有4层到5层的跳转。
    现在的需求是,筛选框有3种状态,每一种状态里只能选择一种分类。如果后退时,必须是原路返回,一层一层的往出退,不能直接退到“花名册”页面,并且退到最外层“花名册”页面时,必须要保留之前的筛选条件

    1、点击姓名进入个人信息页

    一开始,我把获取个人信息放到了”花名册“的组件中,因为点击姓名后,跳转时,要获取用户的权限,跳转到相应的权限所对应的个人信息页面,而都断接口,将获取权限和获取个人详细信息放到一个接口中 了,所以一开始的做法是,在“花名册”页面将权限和详细信息都获取了,并且跳转时,将个人信息的数据,通过路由传参的形式,传过去,再渲染,此时会有两个问题,第一,个人信息页面刷新后会丢失数据,第二、如果后台数据有所变化,那么页面刷新也获取不到最新的数据。
    针对上述问题,我尝试的使用了vux加本地缓存,第一个问题解决了,可是第二个问题得不到解决
    最终,我想到,将获取个人信息的方法,放到”个人信息“组件中,将获取权限和获取个人信息分开,就完美的解决了上述问题,并且封装为api.js模块
    代码如下:

    // 获取花名册员工详细信息接口(分两步,第一步,先获取权限信息,第二步,跳转到员工详细信息页面时,再获取表格数据,完成渲染)
        // 第一步,先获取权限
        export const getType = (params) => get('roster/detail?usercode=' + params).then(res => {
            
            // 跳转
            router.push({
                path: '/roster_userinfo/' + res.data.type,
                // 携带被查询员工编号
                query: {
                    info: params
                }
            })
        })
        // 第二步 跳过去以后,获取被查询员工的详细信息
        export const getDetailedInformation = (params) => get('roster/detail?usercode=' + params)
    

    这样,就可以在需要的地方导入使用就可以啦

    2、实现一层一层后退

    如果单纯的利用BOM对象后退,如果url地址地址不变的话,页面是不会刷新的,所以单纯的点击后退按钮是不行的。
    给每一个组件加上watch监听,就可以实现啦

    // 解决跳转到相同的url路径时,页面不刷星的问题
      watch: {
        '$route' (to, from) {
            this.$router.go(0);
        }
      },
    

    3、实现筛选条件保留之前的高亮的状态

    实现这个功能,我一开始想到了keep-alive组件,但是跳一次路由可以,如果连续跳2次以上,就不行了。
    那么我就想到了vuex + 本地缓存
    代码如下:
    1、首先封装本地缓存的方法

    //storage.js
    // 封装本地缓存的方法
    
    
    // 储存数据
    export const setItem = (key,data) => {
        if(typeof data === 'object'){
            window.sessionStorage.setItem(key,JSON.stringify(data))
        }else{
            window.sessionStorage.setItem(key,data)
        }
    }
    
    // 读取数据
    export const grtItem = (key) => {
        const item = window.sessionStorage.getItem(key)
        try{
            const value = JSON.parse(item)
            if(typeof value === 'object'){
                return value
            }else{
                return item
            }
        }catch(err){
            return item
        }
    }
    
    // 移除数据
    export const removeItem = (key) => {
        window.sessionStorage.removeItem(key)
    }
    

    2、vuex代码:

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    // 导入本地存储的方法
    import { setItem,grtItem } from '@/utils/storage.js'
    
    export default new Vuex.Store({
      state: {
      	// 定义4个状态参数
        staffstatus: grtItem('staffstatus'),
        staffstatuschild:grtItem('staffstatuschild'),
        positiontype: grtItem('positiontype'),
        page: grtItem('page'),    
      },
      mutations: {
        setStaffstatus(state,data){
          state.staffstatus = data
          setItem('staffstatus',state.staffstatus)
        },
        setStaffstatuschild(state,data){
          state.staffstatuschild = data
          setItem('staffstatuschild',state.staffstatuschild)
        },
        setPositiontype(state,data){
          state.positiontype = data
          setItem('positiontype',state.positiontype)
        },
        setPage(state,data){
          state.page = data
          setItem('page',state.page)
        }
    
      },
      actions: {},
      modules: {
      }
    })
    

    3、花名册组件代码:
    将设置默认的筛选条件代码写到一个过渡组件中,这样就解决了好多问题,因为这个项目的登录功能不在我的项目中,所以需要一个过渡组件来获取token和保存token,以及把默认状态值设置到过渡组件中时,只有初次打开花名册页面,才回去显示默认状态,因为后退会触发页面刷新,所以不能设置到花名册的组件中,每次后退都会回到默认状态,与保留筛选条件相冲突

    // 过渡组件
     created() {
        // 页面初次加载,将“在职”状态设置为默认值
        this.$store.commit('setStaffstatus','5')
        this.$store.commit('setPage','1')
        // 获取token
        this.getToken()
      }
    

    然后进入了花名册组件

    created() {
        // 页面首次加载,获取花名册表格数据
        this.getRosterList()
      },
    
    // 获取全局数据
        getRosterList: function () {
        	// 筛选条件初始化,把默认值高亮
          this.active_tab1 = this.$store.state.staffstatus
          this.active_tab2 = this.$store.state.staffstatuschild
          this.active_tab3 = this.$store.state.positiontype
          this.queryInfo.pagenum = Number(this.$store.state.page)
          if(this.active_tab1 == '5'){
            this.is_tab2 = true
          }else{
            this.is_tab2 = false
            this.$store.commit('setStaffstatuschild','')
          }
          if(this.active_tab1 == '6'){
            // this.is_join_day = false
            this.is_firedate = true
          }else{
            // this.is_join_day = true
            this.is_firedate = false
          }
          // 定义参数
          let params = {
            staffstatus:this.$store.state.staffstatus || '',
            positiontype:this.$store.state.positiontype || '', 
            staffstatuschild:this.$store.state.staffstatuschild || '', 
            page:Number(this.$store.state.page) || 1 ,
            limit: this.queryInfo.pagesize,
          }
          getList(params).then((res) => {
            // 员工状态选项卡数据赋值
            this.obj1 = res.data.staffstatus 
            // 在职菜单的二级菜单
            this.obj2 = res.data.staffStatuschild
            // 岗位性质选项卡赋值
            this.obj3 = res.data.positiontype
            // 总条数渲染
            this.total = res.data.total
            // 全部列表数据
            this.rosterList = res.data.list
          })
        },
    

    4、切换筛选条件后,更新vuex的值

    // 以其中的一个点击处理函数为例
    // 员工状态的点击处理函数
        selected_1(key) {
          if(key == '5'){
            this.is_tab2 = true
          }else{
            this.is_tab2 = false
            this.$store.commit('setStaffstatuschild','')
          }
          if(key == '6'){
            // this.is_join_day = true
            this.is_firedate = true
          }else{
            // this.is_join_day = true
            this.is_firedate = false
          }
          const i = key == this.active_tab1
          if(i){
            this.active_tab1 = ''
            this.is_tab2 = false
            this.active_tab2 = ''
            this.is_join_day = true
            this.is_firedate = false
          }else{
            this.active_tab1 = key;
          }
          // 设置tab1
          this.$store.commit('setStaffstatus',this.active_tab1)
          this.$store.commit('setPage',1)
          // 变更筛选条件,将分页的page重置为1
          this.queryInfo.pagenum = 1
          this.getRosterList()
        },
    

    5、最后,我增加了一个功能,刷新页面,将筛选条件恢复到默认状态

    一开始我想在created钩子函数中运行舒适化代码,可是不行,因为后退也会触发created,点击刷新也会触发,这样就不对了,于是上网查了查,如何监听单独的浏览器刷新
    下面是代码:

    // 1 监听浏览器的刷新事件,注册方法
      mounted() {
        // 监听浏览器的刷新事件
        window.addEventListener('beforeunload', this.unload)
        // window.addEventListener('beforeunload', e => this.unload) // 注册一个匿名函数
      },
      // 2 销毁这个监听事件
      destroyed() {
        // 销毁这个监听事件,需要找到这个函数,如果使用的是匿名函数的话,无法查找这个函数,这个事件也就没有办法被移除 ,在其他页面仍然会执行这个监听事件
    		window.removeEventListener('beforeunload', this.unload)
    	},
    	
     methods:{
     	// 3、监听浏览器的刷新,这个方法,后退时是不会触发的
        unload() {
            // 用户刷新时,将筛选状态置为默认参数
            this.$store.commit('setStaffstatus','5')
            this.$store.commit('setPage','1')
            this.$store.commit('setStaffstatuschild','')
            this.$store.commit('setPositiontype','')
    	},
     }
    

    最后,在这梳理一下,整个过程:
    1、页面初次加载在过渡页面设置默认值
    2、进入花名册页面时,页面读取vuex中的默认状态数据
    3、点击切换筛选条件,改变高亮状态的同时,触发vuex的mutations方法去改变vuex中的数据,vuex的数据时响应式的,数据改变就会驱动试图的更新,同时将改变后的数据做了本地缓存,将vuex的数据持久化
    4、这样就实现了,保留状态的后退
    欢迎大家补充

    更多相关内容
  • DataGridView 表头添加筛选功能,类似Excel列筛选功能 VS2013 创建项目
  • Excel为某一列增加数据筛选

    千次阅读 2018-06-13 15:15:07
    使用Excel时经常遇到:某一列增加了一个下拉箭头,可以方便地按数值筛选数据.要让某一列支持数据筛选功能,只需选中该列, 点击菜单栏的 数据-筛选按钮: 图片和操作说明来源于:...

    使用Excel时经常遇到:某一列增加了一个下拉箭头,可以方便地按数值筛选数据.

    要让某一列支持数据筛选功能,只需选中该列, 点击菜单栏的 数据-筛选按钮:

      

    以上操作基于Excel2013.

    图片和操作说明来源于:

    https://support.office.com/zh-cn/article/%E5%AF%B9%E5%8C%BA%E5%9F%9F%E6%88%96%E8%A1%A8%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BF%9B%E8%A1%8C%E7%AD%9B%E9%80%89-01832226-31b5-4568-8806-38c37dcc180e

    展开全文
  • 这是我筛选 LinkedIn 上招聘人员的无操作项目。 这是为了好玩,但我相信它可以改进: 提供真正有用的代码 增加参数化功能,可以根据自己的状态进行配置 添加测试 等等。 随意克隆并玩得开心! 执照 该项目在 ...
  • 识别天才学生的同步筛选/评估程序 ...为有天赋的人提供的计划的持续增长增加了对既高效又准确的筛选程序的需求。 特别是,基于教师推荐的项目在测试时经常有许多学生低于优秀范围。 测试不符合该计划资格的 IQ
  • 增加了在配置选项或选定的组件编辑视图中过滤参数的功能。 项目页面 文献资料 支持 :bell: 消息 :bell: :bell: 演示版 版本 4.0.2 执照 GNU / GPL 该项目是开源项目-随时为我们贡献力量! 谢谢你。
  • Excel - 筛选显示各项数量

    万次阅读 2020-06-02 09:21:06
    在 WPS、石墨中筛选时,每个筛选项后面都自动带有各项数量,但是居然在 Office Excel 里木有~当然解决方案也是有的,如下。 方法 / 步骤 首先是打开excel表格,输入一些数据,便于下面的处理。如下图: 选中...

    在 WPS、石墨中筛选时,每个筛选项后面都自动带有各项数量,但是居然在 Office Excel 里木有~当然解决方案也是有的,如下。

     

    方法 / 步骤

    首先是打开excel表格,输入一些数据,便于下面的处理。如下图:

    选中表格,点击“插入”,选择“数据透视表”。如图所示:

    点击“数据透视表”,在弹出的对话框中选择新工作表,点击确定,如下图:

    在选择要添加到报表字段下方的名称前打勾,我们可以看到行标签显示的都是不重复的水果名称,如图所示:

    把选择要添加到报表字段的水果名称用鼠标拖拽到数字框计数,就可以看到各水果名称的数量了。如下图所示:

    展开全文
  • 增加了在配置选项或选定的组件编辑视图中过滤参数的功能。 项目页面 文献资料 支持 :bell: 消息 :bell: :bell: 演示版 版本 3.0.3 执照 GNU / GPL 该项目是开源项目-随时为我们贡献力量! 谢谢你。
  • element-ui table表头如何筛选并修改筛选图标的样式 1.登录阿里巴巴图标矢量库选择一个心仪的筛选图标添加到购物车 2.然后在右上角进入购物车然后点击添加至我的项目 3.

    一,如何添加筛选功能

    <el-table-column align="left" prop="name" label="筛选姓名" :filters="this.arr"
    
    </el-table-column>

    filters绑定的就是你点击下拉出来要筛选的数组(内容)

    二,如何修改图标(小箭头换成其他漏斗图标)

    1.登录阿里巴巴图标矢量库选择一个心仪的筛选图标添加到购物车

    2.然后在右上角进入购物车然后点击添加至我的项目

    3.然后点击下载代码得到这些,将这些代码替换掉你在项目中的对应的代码

     4.找到table表头中筛选小箭头图标的位置,在css中写

    .container .el-icon-arrow:before{
      font-family:"iconfont" !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size:24px;
      font-style:normal;
      content: "\e62e";
    }

    5.代码中content表示的是16进制,这个需要在刚才我们在阿里巴巴添加到项目中的图标找,点击资源管理我的项目,找到刚刚添加的图标鼠标移上去点击编辑就会看到编码

     

     这样就可以了

    展开全文
  • 由于文件太大请移步 githubhttps://github.com/shabake/GHMall已经实现+ 实现用户注册登录+ 商品浏览+ 商品属性筛选+ 添加商品+ 购物车增加减少商品+ 提交订单+ 已经适配iOS,测试模拟器iPhone11计划实现- 用户登录...
  • 如何在excel中添加筛选

    千次阅读 2015-04-12 12:33:44
    在EXCEL点数据——数据有效性中的(数据有效性)——设置里的允许(A)选中“序列”后出现来源(S),在空白框内填想填的内容,词与词之前用英语状态下用逗号隔开,点确定就完成了
  • 比如我们要增加行业及分类两个自定义分类. 前台效果图 后台效果图,发表文章时,右下角会自动显示   一,在模板的functions.php中的最底部,php结束标签前面,添加如下代码   //自定义文章类型 // 搜索...
  • 1、以搜索的形式进行筛选 2、标签加搜索 3、搜索加高级选项 4、tab的形式切换 5、list筛选 6、全部显示筛选 7、带标签多项筛选 结语 1、以搜索的形式进行筛选 输入框可以输入用户关心的内容,下面可以...
  • 使用人工智能加快海底数据处理-从粗略过滤到精细智能数据筛选 Danny Websdale, Francisco J. Gutierrez 2022年3月10日 人工智能(人工智能)在20世纪50年代首次出现,当时机器在没有人类干预的情况下进行自主操作...
  • 今天我们综合了星球同学的一些需求,给大家梳理了这样一篇风控建模中特征筛选,希望对所有的风控人员在模型开发上都有所启发。 本文,我们会跟大家介绍特征选择的内容,包括其中的重点问题跟注意的细节。 因为完整...
  • 一、开篇 大家新年好!祝大家新年新气象、一切顺心如意!...大家注意,这里不是下面的项目列表筛选不成功,我当时随便创建了两条记录,其中一条记录说是“无锡某炼油工程项目”,但是我是把它的地址设置为
  • 仿美团的下拉筛选菜单

    万次阅读 2016-12-20 17:47:43
    项目下载项目在GitHub上的地址:https://github.com/Hebin320/DropDownMenu项目在CSDN上的下载地址:http://download.csdn.net/detail/hebin320320/9716576项目预览图DropDownMenu介绍与使用这个项目是对开源项目...
  • 大家好呀,珊妹儿最近更新的有点慢了,是因为最近疏于学习,工作也是没接触到一些新的技术,但近期由于工作使用了el-table组件,需求又有个列的筛选,鉴于项目前期使用的jqGrid,大家都知道,这个插件想要实现列的...
  • 提供语言的选择712 在生成model的缓存文件的时候,判断tmp/model是否存在可写715 导入任务的时候,增加项目筛选719 调整权限分组的用户管理,以适应用户很多的情况747 调整变更需求时影响范围的排版749 调整组织...
  • vue + antd中Table自定义列查询筛选

    千次阅读 2022-04-06 16:05:58
    }, { title: '工程项目数量', dataIndex: 'projectSum', key: 'projectSum', width: 120, }, { title: '市场化用工人员数量', width: 360, children: [ { title: '股东方人员数量', dataIndex: 'gdfSum', key: '...
  • 在实际项目中,我们可能会有大量的特征可使用,有的特征携带的信息丰富,有的特征携带的信息有重叠,有的特征则属于无关特征,如果所有特征不经筛选地全部作为训练特征,经常会出现维度灾难问题,甚至会降低模型的...
  • 一、开始前开始之前先去 Antd 官网看下「自定义的列筛选功能」的代码和逻辑:插一句:目前我做的是 PC 后台管理系统,系统里面涉及到大量带条件筛选的表头,项目中「table 自定义列筛选功能」这个组件是另一个小伙伴...
  • 那么本篇我们继续在交替色的基础上,增加筛选的交互,难度有一点增加了哦。 我们先来看看APP列表页的筛选效果图,大家可以看到列表页的交互主要包括: ①在搜索框输入关键词时,列表自动筛选出结果、显示删除图标; ...
  • 字节跳动的简历筛选如何过关

    千次阅读 2020-12-20 18:38:03
    本人在技术面试的实践中,对简历会做初步的筛选,在这过程中,会发现有些简历是一定通不过的,也就是说不会有面试机会,甚至如果该候选人用这份简历,在其它公司也未必能得到面试机会,那么这类候选人就比较悲催了。...
  • 最近一直在为公司招聘前端工程师,前前后后筛选了几百份简历,面试了大几十人,这过程中也发生了很多奇特的事情。渐渐明白,为什么大厂招聘时会在学历上设置门槛。 这篇文章就给大家聊聊,从筛选简历到最终面试中...
  • Mybatis多条件筛选

    千次阅读 2018-05-30 17:21:39
    最近用mybatis做项目数据库框架,学习了很多知识,今天分享两个小知识: 关于if标签的使用 where 1=1小技巧 关于if标签的使用 我们在做业务时,经常遇到按照条件查询,例如: 我们要根据年龄和性别筛选出...
  • 项目管理工具推荐

    千次阅读 2022-06-05 13:57:58
    项目管理工具推荐
  • python读取word文档并作简单的文档筛选 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们...
  • NEVER-TODO-BACKEND总览这是一个...后端-用户登陆功能 前端-待办列表增加,完成,修改,删除 前端-标签增加,完成,修改,删除 前端-待办列表精准查询与模糊查询 前端-标签精准查询与模糊查询 前端-点击标签筛选任务
  • Jira中最好用的功能莫过于筛选器与仪表板了,本文简单总结这两个功能的使用方法。 筛选器Filter 1.在“问题”栏选择“搜索问题” 2.选择搜索属性,比如这里搜索test-project的BUG 3.若需要增加搜索...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,399
精华内容 23,359
关键字:

如何增加筛选项目

友情链接: chaoshengbodaocheleida.rar