标签：exp 数据 选中 sep hit [] rom 点击 name
问题背景：点击上面的框，选中下面对象的行数据
刚开始考虑使用的是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>
标签：exp 数据 选中 sep hit [] rom 点击 name
原文地址：https://www.cnblogs.com/goloving/p/9198410.html
