<template lang="pug">
.account-cover
table.search-result-list(cellspacing="0")
tr
th( @click=" checkedAllLine = !checkedAllLine")
a(href="javascript:void(0);") 全选
th.th-index 序号
th 单号
th 公司
th 客户
th 时间
th 金额(元)
transition(enter-active-class='animated fadeIn')
tbody
tr( v-for="(item,index) in orderList")
td
input( name="orderName" type="checkbox" v-model="item.orderCheck")
td {{index+1}}
td {{item.id}}
td {{item.company}}
td {{item.customer}}
td {{item.time}}
td {{item.amount}}
tr
td(colspan="9" v-if="ordertList.length === 0" align="center") 查无数据
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: "xxxxxxxxx",
data() {
return {
checkedAllLine: false,
visibleAlert: false,
visibleAlertText: '',
orderList:[
{id:1,company:'toc',customer:'lily',
time:'2021-03-03',amount:'500',orderCheck:false},
{id:2,company:'toc',customer:'lily',
time:'2021-03-03',amount:'500',orderCheck:false},
{id:3,company:'toc',customer:'lily',
time:'2021-03-03',amount:'500',orderCheck:false}
],
}
},
created(){
this.getDataList()
},
watch:{
checkedAllLine:function(n,o){
this.orderList.forEach(obj => {
obj.orderCheck = n
})
}
},
methods :{
...mapActions(['visibleLoading', 'invisibleLoading']),
getDataList(){
.........................
},
}
}
</script>
<style lang="scss" scoped>
</style>
通过全选来控制列表中checkbox,点击后checkedAllLine由 false变为 true,打印orderList 发现orderCheck也是true,但是列表中的checkbox并没有变化,视图没有更新。
看来数据层次太多,未能触发视图更新,可用以下几种解决办法:
1.在watch 中修改list后使用 this.$forceUpdate(); 强制更新 ;
2.将 checkedAllLine 绑定在 a( :data=“checkedAllLine” href="javascript:void(0);") 上,以checkedAllLine 的变化来触发视图更新。
3. watch 中 let list = JSON.parse(JSON.stringify(this.orderList)); this.accountList = [];list.forEach(obj => { obj.orderCheck = n }); this.accountList = list ,通过更改数组长度来触发视图更新。