1.界面展示

2.圖中狀態字段接收的數據如下

3.代碼轉換，添加計算屬性代碼

再在綁定屬性的地方做轉換

computed: {statusMap() {return {"-1": "已退號",1: "掛號",2: "接診",3: "已完診",};},},<m-input:span="8"@input="handleStatusInput":disabled="true"label="狀態":value="statusMap[registrationData.zt]"></m-input>await getPatientRegistrationInfo(param).then((res) => {if (res.code === 200) {this.dw_gh = res.data;this.registrationData.zt = this.dw_gh[0].ZT;
//                        .
//                        .
//                        .
//                        .}});

上面是輸入框的映射，還有一種是表格列的映射，如下

<m-dialog :title="dw_1_dialogTitle"height='50vh'width="50%"v-model.sync='isShow_dw_1'top="5vh"@closed="":closeOnModal="false":show-close="false"appendToBody><div style="height: 90%;" class="border-shadow"><MultiDataTable v-loading=""id='dw_1':data="dw_1"ref='dw_1_ref':tableColumns="dw_1_Column"@selection-change=""@row-click=""@select=""@select-all=""v-cloakcell-class-name='nowarp' seq><template #CZ="{row, rowIndex}"><el-button type="text" @click="handleOperation(row, {prop: 'CZ'})">查看</el-button></template><template #CZ1="{row, rowIndex}"><el-button type="text" @click="handleOperation(row, {prop: 'CZ1'})">審核</el-button></template></MultiDataTable></div><div class="common-btn" style="margin-top: 16px; text-align: right" ><m-row><m-button name="refresh" @click="" style="margin-right: 20px">確定</m-button><!-- 回退/審批 按鈕 --><m-button name="close" @click="" style="margin-right: 40px">取消</m-button></m-row></div></m-dialog>data() {return {dw_1_Column: [{label: '類型',prop: 'LX',width: 110,align: 'center',},{label: '單據號',prop: 'DJH',width: 130,align: 'center',},{label: '辦理日期',prop: 'BLRQ',width: 110,align: 'center',},{label: '狀態',prop: 'ZT',width: 110,formatter: (row) => {return this.dw_1_stateMapping[Number(row.row.ZT)] || row.row.ZT;},align: 'center',},{label: '查看',prop: 'CZ',slotName:"CZ",width: 110,align: 'center',},{label: '審核',prop: 'CZ1',slotName:"CZ1",width: 110,align: 'center',},],dw_1_stateMapping: {1: '新制',2: '審核',},}
}

?如圖