Elementui中el-table 的formatterformatter格式化字典显示

Elementui中el-table 的formatterformatter格式化字典显示

1.问题描述：

进行修改功能时，弹出弹框，如果不修改下拉框的数据字典，直接点击确定，发现这行数据不见了。

2.原因:

修改查询时，根据表联查返回的是name而不是id，但是表里存的字段却是id，然后主界面查询时就不会查到本条数据。

3.解决办法：

表联查时，要返回id，不要返回name，如果要使得界面显示的name，就用formatterformatter格式化字典显示。

4.实现

1.给table添加 ：formatter

<el-table-column
          prop="modelId"
          label="资源型号"
          :formatter="modelFormatter">
</el-table-column>

2.声明数组

export default {
  data() {
    return {
      modelName: "", //型号名称
	  state: {},
      sfyResourceArr: [], //资源型号 （数据字典）
      }
     }
   }

3.显示格式化方法

//型号显示格式化
    modelFormatter(row, column) {
      var modelName = "";
      this.sfyResourceArr.map((mod) => {
        if (row.modelId == mod.value) {
          modelName = mod.label;
          console.log("他出现了！！！！！！");
        } else {
          console.log("啊偶啊欧啊偶啊欧" + row.modelId);
        }
      });
      return modelName;
    },

4.数据字典的查询

//资源型号
    LOOKUPS_RESOURCE(state) {
      var _this = this;
      _this.axios["system-manager"]
        .post("/api/basic/lookup/lookupsEnable", {
          types: "sfy_zyxh",
        })
        .then(function (res) {
          state.folkOptions = res[0] ? res[0].children : [];
         
          _this.sfyResourceArr = state.folkOptions.map((mod) => {
            return {
              value: `${mod.attributes.code}`,
              label: `${mod.text}`,
            };
          });
        })
        .catch(function (err) {
          console.log("出错了");
        });
    },