The use of formatter formatting dictionary display of el-table in EleemntUI


Some properties are similar to those stored in dictionaries (key-value pairs), such as operators

1 represents the user id array The library also stores the user id, but the user name is displayed on the page

The czy stored in the database is a number that is the user's id


And to display on the page is the user's name



Pay attention to the public account
domineering programmer
Get programming-related eBooks, tutorial pushes, and free downloads.


Generally, when writing sql statements in the background, use the associated statement to query the user table to query the user name.

But this is just a map of key-value pairs for user id and name.

If it is a key-value pair mapping such as status, in addition to querying the associated table in the background, you can also use el-table in the front end.

formatter for formatted display.

First add operator this column on the page

    <el-table v-loading="loading" :data="bcbdlsList" @selection-change="handleSelectionChange">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="operator" align="center" prop="czy" :formatter="czyFormat" />


Then set a formatter for this column

:formatter= "czyFormat"

in the corresponding formatting method

    // Operator dictionary translation
    czyFormat(row, column) {
      var name = "";
      this.czyOptions.forEach(function (item, index) {
        if (row.czy == item.userId) {
          name = item.userName;
      return name;

The above code is to pass two parameters row is a row parameter, column is a column parameter

Then this.czyOption is an array of objects based on a mapping of user id and name, traverse this array

According to row.czy, the user id stored in the current row is obtained, that is, 1 or 2. In the loop, it is judged that if it is equal to the user id attribute in the key-value pair, the user's name is obtained and returned.

So where to query the data for this key-value mapped array?

First declare this array of dictionaries

  data() {
    return {
      // operator dictionary
      czyOptions: [],

Then request the background data in created to get the user list, so that the list of user objects can be obtained after the page is loaded

  created() {

in the method to get the data

    /** Get operator data */
    getUserList() {
      //Get operator data
      listUser(this.user).then((response) => {
        this.czyOptions = response.rows;

Assign the data queried from the background to the czyOptions above.

Tags: elementUI

Posted by bbbaldie on Wed, 25 May 2022 15:47:49 +0300