您的位置:首页 > 编程学习 > > 正文

vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)

更多 时间:2022-04-02 10:41:02 类别:编程学习 浏览量:1986

vueelementui动态表格

Vue Element前端应用开发之常规的JS处理函数

1、常规集合的filter、map、reduce处理方法

filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组

  • const nums = [10,20,30,111,222,333]
    let newNums=nums.filter(function(n){
        return n<100
    })
    
  • 输出:

    [10,20,30]

    map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2

  • const nums = [10,20,30,111,222,333]
    let newNums=nums.map(function(n){
        return n*2
    })
    
  • 输出:

    [20,40,60,222,666]

    reduce函数主要用于对数组所有元素的汇总操作,如全部相加、相乘等

  • const nums = [10,20,30,111,222,333]
    let newNums=nums.reduce(function(preValue,n){
        return PreValue+n
    },0)
    
  • 输出:

    726

    有时候可以结合几种处理方式一起,如下综合案例所示。

  • const nums = [10,20,30,111,222,333]
    let newNums=nums.filter(function(n){
        return n<100
    }).map(function(n){
        return n*2
    }).reduce(function(preValue,n){
        return preValue+n
    },0)
    
  • 结果:

    120

    另外还有一个数组集合的find方法,和filter方法类似。

    find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)

  • var Array = [1,2,3,4,5,6,7];
     var result = Array.find(function(value){
         return value > 5;   //条件
     });
     console.log(result);//6
     console.log(Array);//[1,2,3,4,5,6,7]
    
  • 同样我们也可以在vue里面,利用require.context的处理机制,遍历文件进行处理,也需要用到了filter,如下代码所示。

    下面代码是我对某个文件夹里面的文件进行一个过滤处理操作

  • const req = require.context('vue-awesome/icons', true, /\.js$/)
    const requireAll = requireContext => requireContext.keys()
    
    const re = /\.\/(.*)\.js/
    
    const vueAwesomeIcons = requireAll(req).filter((key) => { return key.indexOf('index.js') < 0 }).map(i => {
      return i.match(re)[1]
    })
    
    export default vueAwesomeIcons
    
  • 2、递归处理

    有时候,我们需要从一个JSON集合里面,由于集合是嵌套的,如children里面还有chilren集合,根据某个关键属性进行查询,这种处理方式就要用到递归了。

    例如我定义的一个菜单集合里面,就是这样一个嵌套的结构,需要根据名称来获得对应的对象的时候,就涉及到了一个递归处理函数。

    首先我们来看看菜单的JSON集合。

  • // 此菜单数据一般由服务器端返回
    export const asyncMenus = [
      {
        id: '1',
        pid: '-1',
        text: '首页',
        icon: 'dashboard',
        name: 'dashboard'
      },
      {
        id: '2',
        pid: '-1',
        text: '产品信息',
        icon: 'table',
        children: [
          {
            id: '2-1',
            pid: '2',
            text: '产品展示',
            name: 'product-show',
            icon: 'table'
          }]
      },
      {
        id: '3',
        pid: '-1',
        text: '杂项管理',
        icon: 'example',
        children: [
          {
            id: '3-1',
            pid: '3',
            text: '图标管理',
            name: 'icon',
            icon: 'example'
          },
          {
            id: '3-3',
            pid: '3',
            text: '树功能展示',
            name: 'tree',
            icon: 'tree'
          },
          {
            id: '3-2',
            pid: '3',
            text: '二级菜单2',
            icon: 'tree',
            children: [
              {
                id: '3-2-2',
                pid: '3-2',
                text: '三级菜单2',
                name: 'menu1-1',
                icon: 'form'
              }
            ]
          }
        ]
      }
    ]
    
  • 如果我们需要根据ID来遍历查询,就是一个典型的递归查询处理。

  • // 根据菜单id来获取对应菜单对象
        FindMenuById(menuList, menuid) {
          for (var i = 0; i < menuList.length; i++) {
            var item = menuList[i];
            if (item.id && item.id === menuid) {
              return item
            } else if (item.children) {
              var foundItem = this.FindMenuById(item.children, menuid)
              if (foundItem) { // 只有找到才返回
                return foundItem
              }
            }
          }
        }
    
  • 这里值得注意的是,不能在递归的时候,使用下面直接返回

  • return this.FindMenuById(item.children, menuid)
    
  • 而需要判断是否有结果在进行返回,否则嵌套递归就可能返回undefined类型

  • var foundItem = this.FindMenuById(item.children, menuid)
      if (foundItem) { // 只有找到才返回
        return foundItem
      }
    
  • 3、forEach遍历集合处理

    在很多场合,我们也需要对集合进行一个forEach的遍历处理,如下根据它的键值进行处理,注册全局过滤器的处理操作

  • // 导入全局过滤器
    import * as filters from './filters'
    // 注册全局过滤器
    Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key])
    })
    
  • 或者我们在通过API方式获取数据后,对集合进行处理的操作

  • // 获取产品类型,用于绑定字典等用途
        GetProductType().then(data => {
          if (data) {
            this.treedata = [];// 树列表清空
            data.forEach(item => {
              this.productTypes.set(item.id, item.name)
              this.typeList.push({ key: item.id, value: item.name })
    
              var node = { id: item.id, label: item.name }
              this.treedata.push(node)
            })
    
            // 获取列表信息
            this.getlist()
          }
        });
    
  • 又或者请求字典数据的时候,进行一个非空值的判断处理。

  • // 使用字典类型,从服务器请求数据
          GetDictData(this.typeName).then(data => {
            if (data) {
              data.forEach(item => {
                if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
                  that.dictItems.push(item)
                }
              });
            }
          })
    
  • forEach()方法也是用于对数组中的每一个元素执行一次回调函数,但它没有返回值(或者说它的返回值为undefined,即便我们在回调函数中写了return语句,返回值依然为undefined)

    注意:如果forEach里有两个参数,则第一个参数为该集合里的元素,第二个参数为集合的索引;

    4、Object.assign赋值方法

    在有些场合,我们需要把全新的集合,复制到另一个对象上,替换原来对象的属性值,那么我们可以利用Object对象的assign方法。

    如在编辑界面展示的时候,把请求到的对象属性复制到表单对象上。

  • var param = { id: id }
    GetProductDetail(param).then(data => {
    	Object.assign(this.editForm, data);
    })
    
  • 或者查询的时候,获得查询条件,进行部分替换

  • // 构造常规的分页查询条件
          var param = {
            type: this.producttype === 'all' ? '' : this.producttype,
            pageindex: this.pageinfo.pageindex,
            pagesize: this.pageinfo.pagesize
          };
    
          // 把SearchForm的条件加入到param里面,进行提交查询
          param.type = this.searchForm.ProductType // 转换为对应属性
          Object.assign(param, this.searchForm);
    
  • 5、slice() 方法

    slice() 方法可从已有的数组中返回选定的元素。

    语法如下所示。

  • arrayObject.slice(start,end)
    
  • 如下案例所示。

  • let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)
    
  • 或者我们结合filter函数对图标集合进行获取部分处理

  • vueAwesomeIconsFiltered: function() {
      const that = this
      var list = that.vueAwesomeIcons.filter(item => { return item.indexOf(that.searchForm.label) >= 0 })
      if (that.searchForm.pagesize > 0) {
        return list.slice(0, that.searchForm.pagesize)
      } else {
        return list;
      }
    }
    
  • 以上就是Vue Element前端应用开发之常规的JS处理函数的详细内容,更多关于Vue Element常规的JS处理函数的资料请关注开心学习网其它相关文章!

    标签:vue element js 函数
    您可能感兴趣