扩展el-table-column添加字典转换功能[使用Mixins]

需求

在el-table-column上添加一个code属性就可以实现字典值显示

实现

通过mixins混入el-table-column, 再修改其中的renderCell方法, 实现目标;
文中项目使用webpack打包, 通过定义别名在开发环境import elementui/TableColumn, 在生成环境使用window.ELEMENT.TableColumn 避免生成的文件过大

自定义组件

<script>
/*
引入需要混入的TableColumn
*/
import TableColumnMixin from '@mixin/TableColumnMixin';

export default {
  mixins: TableColumnMixin,
  name: "su-table-column",
  props: {
    code: String // 定义code
  },
  data: () => {
    return {
      dicts: null // 缓存的字典
    };
  },
  created() {
    // 不是字典, 不处理
    if (!this.code) return;
    // 加载字典
    this.$LocalUtil.loadDic(this.code).then((res) => {
      res.reduce((pv, cv) => {
        pv[cv.key] = cv.label;
        return pv;
      }, (this.dicts = {}));
    });
    // 代理原有的render
    let orignRrenderCell = this.columnConfig.renderCell;
    this.columnConfig.renderCell = (h, data) => {
      /* 
      返回的值外面还包了一层, 如果使用原包裹代码, 需要引入额外的编译器,
      这里偷懒, 先按照原方法渲染, 然后把值替换掉
      */
      let ort = orignRrenderCell(h, data);
      if (this.dicts && ort && ort.children && ort.children[0]) {
        // 转换字典值
        ort.children[0].text = this.dicts[data.row[data.column.property]];
      }
      return ort;
    };
  },
};
</script>

<style scoped>
</style>

使用

<template>
  <div>
    <el-table :data="data">
      <su-table-column label="su-plain" prop="sex" width="80"></su-table-column>
      <el-table-column label="el-plain" prop="sex" width="80"></el-table-column>

      <su-table-column label="su-code" prop="sex" code="SEX" width="80"></su-table-column>
      <su-table-column label="su-formatter" prop="sex" :formatter="afmt" width="120"></su-table-column>
      <el-table-column label="el-formatter" prop="sex" :formatter="afmt" width="120"></el-table-column>

      <su-table-column label="su-formatter-slot" prop="sex" :formatter="afmt"  width="130">
        <template slot-scope="scope">
          val:{{(scope.row||{}).sex}}; id:{{(scope.column||{}).id}}; idx:{{scope.$index}}
        </template>
      </su-table-column>
      <el-table-column label="el-formatter-slot" prop="sex" :formatter="afmt"  width="130">
        <template slot-scope="scope">
          val:{{(scope.row||{}).sex}}; id:{{(scope.column||{}).id}}; idx:{{scope.$index}}
        </template>
      </el-table-column>

      <su-table-column label="su-slot" prop="sex" width="80">
        <template slot-scope="scope">
          val:{{(scope.row||{}).sex}}
        </template>
      </su-table-column>
      <el-table-column label="el-slot" prop="sex" width="80">
        <template slot-scope="scope">
          val:{{(scope.row||{}).sex}}
        </template>
      </el-table-column> 

      
      <su-table-column label="su-slot" prop="sex" width="80" code="SEX">
        <template slot-scope="scope">
          val:{{(scope.row||{}).sex}}
        </template>
      </su-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table } from "element-ui";
import { TableColumn as SuTableColumn } from "../index";

export default {
  name: "test-su-select",
  components: {
    SuTableColumn,
    Table,
  },
  data() {
    return {
      data: [
        {
          sex: "1",
        },
        {
          sex: "2",
        },
      ],
    };
  },
  watch: {},
  methods: {
    afmt(row) {
      return row.sex + ":with formatter";
    },
  },
  mounted() {
  },
};
</script>

开发环境下的TableColumnMixin

import { TableColumn } from "element-ui";
export default [TableColumn]

生成环境下的TableColumnMixin

export default [window.ELEMENT.TableColumn] // 页面已预先引入element-ui.js