一個巧妙的方法實現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>