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 方法里边！！！！
不然在你过滤时就会报错

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

//节点过滤树用法
<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
    filterNode (value, data) {
      if (!value) return true
      if (Object.prototype.toString.call(data.label) !== String) {
        return String(data.label).indexOf(value) !== -1
      }
      return data.label.indexOf(value) !== -1
    },

    data() {
      return {
        filterText: '',
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: 111111
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

三、对象动态添加属性的方法
用 对象[属性名]=xx的方式
如 person={};
for XX in XX
person[property]=“”“
四：判断两个对象是否相等的三种方法

loadsh方法
this._.isEqual(Object1, Object2), 
//es6语法
Object.entries(Object1).toString() ===Object.entries(Object2).toString(), 
//转字符串
JSON.stringify(Object1) === JSON.stringify(Object2)

五、elementUI的select组件踩坑
如果select的option和multiple都是动态渲染的，那么绑定的值就要定义好数据类型，不然报错!