TS2339: Property ‘value‘ does not exist on type ‘MessageBoxData‘.

在这里插入图片描述

1、源代码

<template><el-dialog:visible="visible":before-close="handleClose":close-on-click-modal="false"title="邀请码"width="1200px"append-to-bodydestroy-on-close><div class="invite-code-wrap"><div class="operate-bar"><el-buttontype="primary"size="mini"@click="handleAdd">添加</el-button></div><el-table:data="tableData"borderstyle="width: 100%":max-height="500"><el-table-columnfixedprop="id"label="邀请码ID"width="80"/><el-table-columnprop="code"label="邀请码"width="120"><template slot-scope="scope"><div class="code-desc"><span>{{ scope.row.code }}</span><p class="desc">6位整数，可以重复出现，但是在任何有效时间内具有唯一一性</p></div></template></el-table-column><el-table-columnprop="invitor"label="邀请人"width="100"/><el-table-columnprop="createTime"label="生成时间"width="140"/><el-table-columnprop="expireTime"label="失效时间"width="140"/><el-table-columnprop="remark"label="备注"width="150"show-overflow-tooltip/><el-table-columnprop="status"label="状态"width="80"><template slot-scope="scope"><el-tag:type="getStatusType(scope.row.status)"size="mini">{{ getStatusText(scope.row.status) }}</el-tag></template></el-table-column><el-table-columnprop="boundPhone"label="绑定手机号"width="110"/><el-table-columnprop="boundWxUid"label="绑定微信UID"width="120"show-overflow-tooltip/><el-table-columnlabel="操作"fixed="right"width="120"><template slot-scope="scope"><div class="operation-cell"><el-buttontype="text"size="mini"class="operation-btn"@click="handleLock(scope.row)">锁定</el-button><el-buttontype="text"size="mini"class="operation-btn"@click="handleRemark(scope.row)">备注</el-button><el-buttontype="text"size="mini"class="operation-btn"@click="handleLog(scope.row)">日志</el-button></div></template></el-table-column></el-table></div><invite-code-add:visible.sync="addVisible"@success="handleAddSuccess"/></el-dialog>
</template><script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import InviteCodeAdd from './invite-code-add.vue'@Component({name: 'InviteCodeForm',components: {InviteCodeAdd}})
export default class extends Vue {@Prop({ default: false })private visible!: booleanprivate tableData = [{id: 1,code: '123456',invitor: '张三',createTime: '2023-12-11 16:58:25',expireTime: '2023-12-11 16:58:25',remark: '测试数据',status: 'pending',boundPhone: '18658862700',boundWxUid: 'XXXXXXXXXX',isLocked: false}]private addVisible = falseprivate getStatusType(status: string) {const map: { [key: string]: string } = {pending: 'info',expired: 'danger',bound: 'success'}return map[status] || 'info'}private getStatusText(status: string) {const map: { [key: string]: string } = {pending: '待绑定',expired: '已失效',bound: '已绑定'}return map[status] || status}private handleClose() {this.$emit('update:visible', false)}private handleAdd() {this.addVisible = true}private handleAddSuccess() {// TODO: 刷新列表数据}private handleLock(row: any) {// TODO: 处理锁定/解锁逻辑this.$confirm(`确定要${row.isLocked ? '解锁' : '锁定'}该邀请码吗？`, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async() => {// TODO: 调用锁定/解锁APIthis.$message.success(`${row.isLocked ? '解锁' : '锁定'}成功`)}).catch(() => {})}private handleRemark(row: any) {this.$prompt('请输入备注', '备注', {confirmButtonText: '确定',cancelButtonText: '取消',inputValue: row.remark,inputValidator: (value: string) => {return value.length <= 60},inputErrorMessage: '备注不能超过60个字符'}).then(async({ value }) => {// TODO: 调用保存备注APIthis.$message.success('备注保存成功')}).catch(() => {})}private handleLog(row: any) {// TODO: 显示日志记录// 可以打开一个新的对话框显示操作日志列表}mounted() {// TODO: 获取邀请码列表数据}
}
</script><style lang="scss" scoped>
.invite-code-wrap {.operate-bar {margin-bottom: 16px;}.code-desc {.desc {margin: 5px 0 0;font-size: 12px;color: #999;line-height: 1.2;}}:deep(.el-table) {// 表格基础样式width: 100%;border: 1px solid #EBEEF5;// 表头样式th {background-color: #F5F7FA;color: #606266;font-weight: 500;padding: 12px 0;}// 表格内容样式td {padding: 12px 0;}// 状态标签样式.el-tag {height: 22px;line-height: 20px;border-radius: 2px;margin: 0;}// 操作列按钮样式.operation-cell {white-space: nowrap;text-align: center;.el-button {padding: 0;font-size: 12px;color: #409EFF;border: none;background: transparent;margin: 0 4px;&:hover {color: #66b1ff;}}}// 单元格通用样式.cell {line-height: 23px;}// 文字溢出处理.el-table__row {td {.cell {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}}
}
</style>

2、修改之后

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { ElMessageBox } from 'element-ui/types/message-box'
import InviteCodeAdd from './invite-code-add.vue'type MessageBoxData = {value: stringaction: 'confirm' | 'cancel'
}@Component({name: 'InviteCodeForm',components: {InviteCodeAdd}
})
export default class extends Vue {// ... 其他代码保持不变 ...private handleRemark(row: any) {this.$prompt('请输入备注', '备注', {confirmButtonText: '确定',cancelButtonText: '取消',inputValue: row.remark,inputValidator: (value: string) => {return value.length <= 60},inputErrorMessage: '备注不能超过60个字符'}).then(async (data: MessageBoxData) => {// TODO: 调用保存备注APIthis.$message.success('备注保存成功')}).catch(() => {})}// ... 其他代码保持不变 ...
}
</script>