一个巧妙的方法实现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>