一个巧妙的方法实现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]"></el-checkbox>
                <span>{{item.review_data}}</span>
            </div>
        </div>
    </div>

    <h5>推荐服务：</h5>
    <el-table
    ref="order"
    :data="orderData"
    @selection-change="handleSelectionChange">
        <el-table-column width="80">
            <template slot-scope="scope">
                <el-checkbox onclick="return false;" v-model="checkList[scope.row.order_id]"></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="bg_gray sum" v-if="sum > 0">合计：{{sum}}</div>
      <div class="btn_submit" v-if="userInfo && userInfo.roleName === ‘user‘">
        <el-button @click="submitOrders(‘orders‘)" type="primary" plain>提交订单</el-button>
        <router-link :to="‘/standard1‘">
            <el-button type="danger">选择年付服务更实惠</el-button>
        </router-link>
    </div>
</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:{}
        }
    },
    computed:{
        ...mapGetters([‘reportInfo‘,‘userInfo‘])
    },
    methods:{
        fetchData(){
            getReviewApi(this.reportInfo.report_id).then((res) => {
                if(res.status === 200){
                    this.orderData = res.data
                }
            })
        },
        handleSelectionChange(rows){
            let _sum = 0;
            this.checkList = {}
            rows.forEach(item => {
                _sum += item.service_price
                this.checkList[item.order_id] = ‘icon-choice‘
            })
            this.sum = _sum;
            this.orders = rows;
        },
        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(‘/order‘)
                    this.$message({
                        message:‘订单提交成功‘,
                        type:‘success‘
                    })
                }
            })
        }
    },
    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
}
</style>

原文地址：https://www.cnblogs.com/goloving/p/9198410.html