Vue踩坑过程

引用对象数据更新而视图未更新

• 数组

  • 由于JavaScript的限制（具体什么待学习）Vue不能检测利用索引直接设置一个项，例如arr[1] = ['a']；修改数组长度时，例如arr.length = 2。第一种问题可以使用this.$set(arr,1,newValue)或者this.arr.splice(index,1,newValue)；第二种问题使用this.arr.splice(newLength)

• 对象

  • Vue不能检测对象属性的添加或者删除。this.$set(this.obj, 'age', 27)

使用持久化存储，不能直接通过this.$store.state直接修改，改为使用vuex的方式

iview table render directive

return { 
   // 列 
   columns: [ 
    { 
     title: 'name', 
     width: 80, 
     align: 'center', 
     render: (h, params) => { 
      return h( 
       'Poptip', 
       { 
        props: { 
         trigger: 'hover', 
         placement: 'bottom-start', 
         transfer: true 
        } 
       }, 
       [ 
        h( 
         'span', 
         { 
          style: { 
           // cursor: 'pointer', 
           color: '#466ee2' 
          } 
         }, 
         params.row.info 
        ), 
        h('img', { 
         slot: 'content', 
         props: { 
          // src: params.row.scr 
          height: '300px' 
         }, 
         // 使用自定义指令 
         directives: [ 
          { 
           name: 'lazy', 
           // 如有其他参数可以在此添加, 
           value: { 
            src: require('../img/test.png'), 
            recordType: 3 
           } 
          } 
         ], 
         style: { 
          height: '286px', 
          width: 'auto' 
         } 
        }) 
       ] 
      ); 
     } 
    }, 
    { 
     title: '时间', 
     key: 'date', 
     align: 'center', 
     tooltip: true 
    }, 
    { 
     title: '操作', 
     width: 80, 
     align: 'center', 
     render: (h, params) => { 
      return h('icon-svg', { 
       attrs: { 
        type: 'svgIcon_view', 
        title: '详情' 
       }, 
       nativeOn: { 
        click: () => { 
         console.log(params); 
         this.$emit('row-click', params); 
        } 
       } 
      }); 
     } 
    } 
   ] 
  };