一个巧妙的方法实现elementUI的table的行选中

　　问题背景：点击上面的框，选中下面对象的行数据

　　刚开始考虑使用的是table的事件：toggleRowSelection，但是发现一个奇怪的现象

<div v-if="orderData.length > 0">
    <h5>审核意见：</h5>
    <div class="review bg_gray" v-for="(item,index) in orderData">
        <div class="content" v-if="item.review_data">
            <span @click="toggleSelection(0)">
            <el-checkbox v-model="checkList[item.order_id]"></el-checkbox>
            </span>
            <span>{{item.review_data}}</span>
        </div>
    </div>
</div>

<el-button @click="toggleSelection(0)">选中状态</el-button>

toggleSelection(index){
    this.$refs.order.toggleRowSelection(this.orderData[index]);
}

　　上面2个方法，一模一样，但是只有第二个能选中，第一个却无效。一直想不明白为什么。

　　所以考虑换一种方式：

　　直接看代码吧：我在表格里面加了一列checkbox，然后让上面的checkbox和表格里的checkbox的v-model指向同一数据，那么这样上面变化时，下面也会变化，下面变化，上面也跟着变化，同步响应。

　　当然如果想下面表格里的chexkbox不能点选，那么就要加上：onclick="return false;"，这也是一个技巧吧

<template>
<el-main>
    <div v-if="orderData.length > 0">
        <h5>审核意见：</h5>
        <div class="review bg_gray" v-for="(item,index) in orderData">
            <div class="content" v-if="item.review_data">
                <el-checkbox v-model="checkList[item.order_id]" v-if="!item.is_choose"></el-checkbox>
                <span>{{item.review_data}}</span>
            </div>
        </div>
        <h5>针对以上每一个问题，我们可以为您提供如下服务，确保您的数据库高效稳定运行，您可以勾选下单，我们立即为您服务：</h5>
    </div>
    <el-table
    ref="order"
    :data="orderData"
    class="serviceStyle"
    show-summary
    :summary-method="totalRule">
        <el-table-column width="80">
            <template slot-scope="scope">
                <el-checkbox onclick="return false;" v-model="checkList[scope.row.order_id]" v-if="!scope.row.is_choose"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column prop="service_class" label="服务类别"></el-table-column>
        <el-table-column prop="service_name" label="服务名称"></el-table-column>
        <el-table-column prop="service_price" label="服务价格"></el-table-column>
      </el-table>
      <div class="btn_submit" v-if="userInfo && userInfo.roleName === 'user'">
        <el-button @click="submitOrders('orders')" type="primary" plain>提交订单</el-button>
    </div>

    <h5>您也可以购买一年的云服务，除了解决以上问题外，还能享受到
        <router-link :to="'/couldService'">
            点击查看云服务详情
        </router-link>
    </h5>
</el-main>
</template>
<script type="ecmascript-6">
import {getReviewApi,reviewSaveApi} from '@/apis'
import {mapGetters} from 'vuex'
export default {
    data(){
        return {
            orderData:[],
            sum:0,
            orders:[],
            checkList:{},
            serviceShow:false
        }
    },
    computed:{
        ...mapGetters(['reportInfo','userInfo'])
    },
    watch:{
        checkList:{
            handler:function(oldValue,newValue){
                this.orders = JSON.parse(JSON.stringify(this.orderData))//深拷贝的技巧
                let count = 0//修正删除的index
                this.orderData.forEach((item,index) => {
                    if(this.checkList[item.order_id]){
                        this.serviceShow = true
                    }else{
                        this.orders.splice(index - count,1)
                        ++count
                    }
                })
            },
            deep:true
        }
    },
    methods:{
        fetchData(){
            getReviewApi(this.reportInfo.report_id).then((res) => {
                if(res.status === 200){
                    this.orderData = res.data
                }
            })
        },
        submitOrders(type){
            if(this[type].length === 0){
                this.$message({
                    message:'请选择订单',
                    type:'error'
                })
                return false
            }
            reviewSaveApi('choosePreorders',this[type]).then(res => {
                if(res.status === 200){
                    this.fetchData()
                    this.$router.push('/shopCart')
                    this.$message({
                        message:'订单提交成功',
                        type:'success'
                    })
                }
            })
        },
        totalRule(){
            let _sum = 0
            this.orderData.forEach(item => {
                if(this.checkList[item.order_id]){
                    _sum += item.service_price
                }
            })
            return ['合计','','',_sum]
        }
    },
    mounted(){
        this.fetchData()
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet">
@import '../../assets/css/index.styl'
.review{
    white-space pre-wrap
    padding 10px 20px
    font-size 14px
}
.sum{
    font-size 14px
    text-align right
}
.serviceStyle /deep/ .el-table__footer-wrapper .has-gutter td:nth-child(4){
    color red
    font-size 20px
}
</style>