The first requirement of my internship was page internationalization. I felt that the code was very simple, but as soon as I got started, bugs were flying everywhere. Moreover, a solution was often only applicable to components or data of one type, so I had to think again for another type. These solutions are hereby recorded

1. Basic solutions

Reference:
 
www.jianshu.com/p/71e9073df…

The project uses Ant-design-vue + vuE-i18n. After configuration, replace the text with {{$t(‘your name. Your key’}} to solve the basic problem of page text internationalization.

Table Header data solution

Project requirements of the first problem, the header is to write the data in the data, the above methods are shoehorned into the header data is not on the switch, the official solution is to put the data in the computed, but the project data is already written, if I were blind move out of a lot of bugs, the people in the group is expected to hang my play, Finally, the method of listening to the Chinese and English button switch and then refresh the table header data.

The first step is to upload the value of the switch to the corresponding page

changeLocale (localeval) {
      this.localeval = localeval
      if (localeval === EN) {
        moment.locale(EN)
        this.$i18n.locale = EN
        this.$bus.$emit('changeLocale'.'en-us')// Components pass values
      } else {
        moment.locale(ZH)
        this.$i18n.locale = ZH
        this.locale = zhCN
        this.$bus.$emit('changeLocale'.'zh-cn')// Component pass value}
    }
Copy the code

Corresponding page accepts data:

   mounted() {
      this.$bus.$on('changeLocale', (param) => {
          console.log("The value received is.",param)
      })
    }Copy the code

Then write the method to refresh the table data:

   methods(){      
       init() { 
        this.initTable()
     },
      initTable() {
      const tables = ['tableColumns']
      const allTitle = {
        tableColumns: [{title: this.$t('title.one'), // The data corresponding to the table header
          }, 
          {
            title: this.$t('title.two'),}, {title: this.$t('title.three'),}, {title: this.$t('title.four'),}},]for (let i = 0; i < tables.length; i++) {
        const line = tables[i] // To find the corresponding data
        this[line] = allTitle[line]
        }
      }
    }Copy the code

Just call it when you switch

  mounted() {
    this.$bus.$on('changeLocale', (param) => {
      this.initTable()
    })
    this.init() // Initialize the data
  }Copy the code

3. Table solution with cell editing

I didn’t know there was a translation in the form



This is easy if the table is written as given on ant’s official website, just replace the corresponding text

<a href="javascript:;">{{$t('table.Delete'}} </a>Copy the code

But they also put this field in the data… The $t character is no longer used in HTML, so you can only use if when refreshing the data and then output the corresponding language

I’m just going to do the same thing and I’m just going to make a judgment

—— Continuously updated ——