问题背景:点击上面的框,选中下面对象的行数据
刚开始考虑使用的是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>