vue项目日常踩坑记录

一、关于数据类型
今天在做后端返回数组数据转化成elementUI树形组件可用的数组时,因为数据类型比较复杂,里边的数据类型有Object,Array,String,number等一些基本类型,所以我在数据转化时用了双递归的写法,在处理children 项的时候当时没注意把 child_item instanceof Array 判断写在了child_item instanceof Object 的后边,后来改Array 的label项的值的时候发现改完只有第一层生效,再递归到里边的时候怎么也不生效最后发现 Array 在后边也被判定为 Object 类型,就一直没有做处理 就无语, 所以以后在做数据类型判断,且 Array类型的处理方式区别于 Object类型时,一定要把Array类型的判断写在Object的前边,不然就用严格判断类型方法(Object.prototype.toString.call), 不要用 instanceof typeof的方法。

// 处理树形组件 data 绑定数组的的children项
    checkItem (label, child_item) {
      let itemList = {
        id: this.n++,
        label: label,
        children: null
      }

      if (child_item instanceof Array) {
        itemList.children = this.checkList(child_item)
      } else if (child_item instanceof Object) {
        itemList.children = this.checkObj(child_item)
      } else if (child_item) {
        itemList.children = [
          {
            id: this.n++,
            label: child_item,
          }
        ]
      }
      return itemList
    },
    // 处理Array类型
    checkList (list) {
      let data = []
      list.forEach((item, index) => {
        let itemList
        if (item.url) {
          itemList = this.checkItem(item.url, item)
        } else {
          itemList = this.checkItem(index, item)
        }

        data.push(itemList)
      })
      return data
    },
    // 处理object类型
    checkObj (obj) {
      let data = []
      for (const key in obj) {
        let item = obj[key]
        let itemList = this.checkItem(key, item)
        data.push(itemList)
      }
      return data
    },

二、indexOf的用法
还是关于elementUI。树形组件的过滤用法
indexOf的方法只能用于判断string和array是否包含某个字符,其他的则不能使用
如果你的树形绑定数组的值有Number或其他类型,而不是只有string类型,那一定要记得转类型在 filterNode 方法里边!!!!
不然在你过滤时就会报错vue项目日常踩坑记录_第1张图片

**转string类型的用法
1 toString 方法
string = toString(num)
缺点: 不能转化 underfind 和 null
2 String 方法
string = String(num)
可以转化 underfind 和 null
3 num + ''
string = num + ''**

//节点过滤树用法






三、对象动态添加属性的方法
用 对象[属性名]=xx的方式
如 person={};
for XX in XX
person[property]=“”“

你可能感兴趣的:(vue项目日常踩坑记录)