扩展el-table-column 添加字典转换功能

目标

在el-table-column上加一个code属性, 无需其他配置就可以显示字典值

实现

新建组件, 给el-table-column套一层, 添加属性code, 在组件初始化后加载字典;
如果有code, 使用el-table-column的slot进行字典值的展示;
如果有slot, 就把el-table-column的slot中的参数接出来再发出去

自定义组件

<template>
 <el-table-column
   v-bind="$attrs"
   :formatter="formatter"
   :renderHeader="renderHeader"
   :sortMethod="sortMethod"
   :sortBy="sortBy"
   :selectable="selectable"
   :filterMethod="filterMethod"
   :index="index"
 >
<!-- 优先级 code > slot > formatter > 原文-->
   <template slot-scope="scope" :slot="!!code ? 'default' : 'unused-slot'">
     {{
       code && dicts ? dicts[scope.row[$attrs.prop]] : scope.row[$attrs.prop]
     }}
   </template>  

<!-- 使用slot 接收el-table-column的scope, 再定义一个slot把接收的scope传递出去-->
   <template slot-scope="scope" :slot="$scopedSlots.default ? 'default' : 'unused-slot'">
     <slot :name="$scopedSlots.default ? 'default' : 'unused-slot'" v-bind="scope"></slot>
   </template>

 </el-table-column>
</template>

<script>
export default {
 name: "su-table-column",
 props: {
   code: String,
   // Function 单独绑定, $attrs绑定不了
   renderHeader: Function,
   sortMethod: Function,
   sortBy: [String, Function, Array],
   formatter: Function,
   selectable: Function,
   filterMethod: Function,
   index: [Number, Function],
 },
 data: function () {
   return {
     dicts: null,
   };
 },
 mounted() {
   if (this.code)
     this.$LocalUtil.loadDic(this.code).then((res) => {
       res.reduce((pv, cv) => {
         pv[cv.key] = cv.label;
         return pv;
       }, (this.dicts = {}));
     });// 加载字典
 },
}; 
</script>

<style scoped>
.su-table-column {
 display: inherit;
}
</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>
    </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>

参考

Vue跨层级传递slot的方法