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>

主要改動：

1. 添加了 MessageBoxData 類型定義
2. 在 then 回調中使用完整的 data 參數而不是解構