背景
工作中要做一个按钮隐藏的逻辑,当系统当前时间减去数据的创建时间大于用户配置的失效时间后按钮隐藏。由于按钮的disabled属性原本就有两个条件来控制,增加第三个条件后逻辑就有点太复杂,不适合直接写在属性后,于是就想用计算属性来实现,这时候又遇到一个问题,这几个判断条件都用到了父元素传递的数据,因此也必须要通过computed传参。通过多方查询,使用了在computed中返回函数的方式传参。一切问题都解决了,就看最后结果了。在computed中用debugger打断点,看看当前时间改变后computed是否能触发,结果一看一个不出声,debugger不论怎么写浏览器都执行不到,没有效果。奇了怪了!反复检查浏览器的控制台,也没有选择取消监听debugger按钮啊。于是怀疑是不是代码哪里写的不正确,导致computed不触发。反复检查,确定没什么问题。后来在mounted中打断点,发现也无法触发,终于发现端倪,然后上网搜索,查到说是需要再控制台的setting中取消勾选忽略列表中的某项。果然取消后,debugger就监听到了。耗费了半个多小时,原来是这么简单的问题。奇怪的是我从来没有设置过这个配置,为什么突然就不行了?深层原因没有细究,问题是解决了,逻辑没问题,一切正常跑通。
代码
<template>
<Table :data="reportList" height="100%" border>
<TableColumn prop="FileName" label="文件名" />
<TableColumn label="确认人">
<template #default="{row}">
{{row.ConfirmName}}
</template>
</TableColumn>
<TableColumn label="操作" width="140px">
<template #default="{row}">
<!-- <Button size="mini" type="success" :disabled="!!row.ConfirmName || row.TriggerType == 4 || (new Date()).getTime() - (new Date(row.TriggerTime)).getTime() > confirmWaitTime * 60 * 1000" @click="confirm(row.ID)">确认</Button> -->
<!-- <Button size="mini" type="success" :disabled="false || false || (new Date()).getTime() - (new Date(row.TriggerTime)).getTime() > confirmWaitTime * 60 * 1000" @click="confirm(row.ID)">确认</Button> -->
<!-- 关键代码 -->
<Button size="mini" type="success" :disabled="isButtonDisabled(row)">确认</Button>
<Button size="mini" type="primary" @click="selectExcel(row.Guid)">查看</Button>
</template>
</TableColumn>
</Table>
</template>
js代码
export default {
data(){
return {
confirmWaitTime:window.confirmWaitTime,
currentTime:(new Date()).getTime()
}
},
mounted() {
this.updateCurrentTime();
setInterval(this.updateCurrentTime, 1000); // 每秒更新一次
},
components: {
Table,
TableColumn,
Button
},
name: "ReportList",
model: {
prop: "selectedReportId",
event: "change",
},
props: {
selectedReportId: String,
},
computed: {
isButtonDisabled() {
return (row) => {
let createTime = (new Date(row.TriggerTime)).getTime();
return row.TriggerType === 4 || !!row.ConfirmName || this.currentTime - createTime > this.confirmWaitTime * 60 * 1000;
};
},
},
methods: {
updateCurrentTime() {
//console.log("updateCurrentTime",this.currentTime);
this.currentTime = (new Date()).getTime();
},
},
};