table 在渲染完成后 禁用和 复选框选择后无法重新渲染的解决办法

<template>
  <div class="main-home-page">
    <div>
      <div>
        <Table border ref="selection" :columns="columns" :data="records"></Table>
        <div style="margin-top: 16px">
            <Button @click="handleSelectAll(true)">禁用</Button>
            <Button @click="handleSelectAll(false)">取消禁用</Button>
        </div>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                records: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
    },

    methods:{
      handleSelectAll(status){
        this.records.forEach((item)=>{
          item._disabled= status
        })
      
      }
    }
  }
</script>

我发现 只要页面数据加载出来，那么后期再修改 禁用_disabled 和 复选框_checked选择组件无法 进行渲染

那么我们需要搞清楚 他为什么不能进行渲染，大概想了下，可能是没有监听到数据的修改，也就是数据已经发生改变了，但是没有渲染，于是我看了下源码

再 看下，只需要 调用table 的makeObjData 方法，将这个方法的返回值，重新赋值 给 objData 就可以了

修改handleSelectAll 方法

      handleSelectAll(status){
        this.records.forEach((item)=>{
          item._disabled= status
        })
        this.$set(this.$refs.selection, 'objData', this.$refs.selection.makeObjData()) 
        // console.log(this.records)
      
      }

完美解决问题～～～～～