vue-div形式下翻译字典值

1、主页面标题对应列

<div class="myToDoListNoticeTitle" @click="handleNoticeView(item)">{{item.noticeTitle}}</div>

2、点击标题查看详情操作

2.1、主方法

   /** 点击标题查看详情操作 */
    handleNoticeView(row) {
      this.reset();
      const noticeId = row.noticeId || this.ids
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.form.noticeType = this.dictValueLabelMap[this.form.noticeType]
        this.openNotice2 = true;//打开弹框
        this.title = "公告详情";
      });
    },

2.2、computed中的dictValueLabelMap方法

  /** dictValueLabelMap方法，根据传入的dictValue返回对应的dictLabel */
  computed: {
    dictValueLabelMap(){
      return this.typeOptions.reduce((acc, curr) => {
        acc[curr.dictValue] = curr.dictLabel;
        return acc;
      }, {});
    }
  },

2.3、created中的获取字典值

  created() {
    this.getDicts("sys_notice_type").then(response => {
      this.typeOptions = response.data;
    });
  }

2.4、记录点

（1）this.form.noticeType = this.dictValueLabelMap[this.form.noticeType]：为了翻译字典值，this.dictValueLabelMap详细介绍在2.2代码
（2）this.typeOptions来源：对应2.3代码

3、弹框代码和页面

<el-dialog :title="title" :visible.sync="openNotice2" width="700px" append-to-body>
      <div style="height: 400px;">
        <div class="noticeTitle"  v-html="form.noticeTitle"></div>
        <div class="noticeContainer">
          <div class="noticeBox" v-html="form.createTime"></div><span class="noticeType">|</span>
          <span class="noticeType">类型：</span>
          <div class="noticeBox" v-html="form.noticeType"></div>
        </div>
        <hr>
        <div class="noticeContent" v-html="form.noticeContent"></div>
      </div>
    </el-dialog>

3.1、记录点

（1）append-to-body：为了避免出现遮罩层在最上面挡住了显示层，以及被其他定位元素挡住（主要IE浏览器）