前端代码采用Element的el-table组成的表格,vue cli框架4.5.11版本,列采用el-table-column,需求是第N列选择一个日期,第N+1列显示到现在还差多少天,我所遇到的问题就是选择完天后,第N+1列的天数不显示出来,或者选择第二次的时候出现的是上一次选择的值
部分代码:
<el-table-column prop="selectDate" label="Select Day" width="190">
<template slot-scope="scope">
<el-date-picker
placeholder="Year/Month/Day"
format="yyyy/MM/dd"
value-format="yyyy/MM/dd"
v-model="scope.row.selectDate"
type="date" @change="onResultRowChange(scope)" @clear="onResultRowChange(scope)" style="width: 100%;">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="restDay" label="Rest days" width="100"></el-table-column>
我之前采用this.$forceUpdate(),还用过this.$nextTick,结果发现都没有用,搜了资料后才发现原来Vue对于数组的监听存在限制,必须手动设置才行
参考链接:https://blog.csdn.net/weixin_44346827/article/details/90247714
在vue cli中可以使用this.$set这个方法,我目前做的是
this.$set(${vue data中的一个数组}, ${需要修改的数组的index}, ${需要替换的值})
然后是代码:(仅供参考,毕竟是公司项目,没法贴所有。说明:onResultRowChange是个方法,在methods中。ServerInterface.defaultPost是请求后端接口的方法(大家不用管)。tableData是个数组,在data中)
onResultRowChange(scope) {
//请求网络接口的方法,结果是由后端进行计算的
ServerInterface.defaultPost("某个接口.html", form, obj => {
let restDay = obj.restDay;
scope.row.restDay = restDay
this.$set(this.tableData, scope.$index, scope.row)
}, undefined, false)
},
我这边投机取巧的地方就在于我把整行的scope都传入了方法中,scope.$index就是这行在数组中的index,相当于把整行内容修改其中一个值后重新塞回去了,达到了Vue强制刷新单行的效果