教女朋友|表弟系列：问题解决-表格渲染错误

情景

表弟在写表格功能的时候，发现他的表格操作栏的按钮虽然能根据任务状态置灰不可点击，但要么全部都不可点击，要么全部可点击。

看了下代码，渲染的逻辑如下：

// data部分
data() {
    return {
        buttons: [
           {
              label: '详情',
              disable: () => {
                return true
              }
           },
           {
              label: '重发',
              disable: (data) => {
                return data.task_status === '2'
              }
           },
            {
              label: '作废',
              disable: (data) => {
                return data.task_status === '2'
              }
           }
        ]
    }
}

// 按钮逻辑部分，使用的是渲染一个按钮组组件，然后传入按钮的配置，每一行按钮都去取一下按钮的数据，然后塞入组件
render(h, params) {
    let buttons = this.buttons;
    buttons.forEach(b => {
        b.disabled = b.disableFn(params.row)
    })
    return h('button-array', {
        buttons
    })
}

结合问题来看，相当于他的配置出了问题，配置都变一样的了，看了下：let buttons = this.buttons，虽然当时就return出去了按钮组件的渲染配置，但是所有渲染都是放在最后的，所以是等所有行的数据以及配置都处理完毕再进行渲染的，这样就导致按钮组件的配置会被一次次覆盖，因为数组和对象都是复杂数据类型，直接等于引用不仅用了它的值，还用了它的映射关系，就是所谓的浅拷贝，改动拷贝后的值，也会影响到原值，多次浅拷贝，改动任意个拷贝项的值，都会改动所有的数据。

这里采用 深拷贝 就没有问题了，这里使用lodash库的方法deepClone，修改代码：let buttons = deepClone(this.buttons)就没问题了。