vue前端字典映射

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-cloak
                        cell-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: '审核',
      },
  }
}

 如图