el-table-colmun-dict组件

主要用于字典展示字典中文数据。 支持配置el-table-column所有属性，事件及slot。调用getRef() 返回el-table-column 实例

maskType 支持数据脱敏，可以name姓名脱敏，mobile手机号脱敏，idCard身份证号脱敏，address地址脱敏，如果以上四种脱敏方式与需求不符，可配置maskStart表示展示数据前几项，再配合maskEnd 展示后面几项，如果数据很长，需要省略中间 * 符号的个数，可以配置maskMiddle表示中间展示几个 *，不喜欢用 * 也可配置 maskSymbol 配置脱敏符号

dateFormat配置日期格式，可传date， month，datetime，time， year 。如均不符合需求，可自定义格式，具体查看日期格式

dictType传递字典类型，会根据此字典类型，自动将值转化为中文

dictTreeType传递树形字典类型，会根据此字典类型，自动将值转化为中文

注意当数据字典需要展示多个时，数据需要返回【数组格式】或英文逗号“,”隔开

如果后端返回数据非逗号隔开，可配置spacer参数，配置后端返回数据隔开的符号。

默认返回数据是 ，隔开， 如 一等奖,二等奖,三等奖 如果这种逗号隔开的显示不是你想要的，可以通过formatFun配置返回的数据形式

    formatFun(arr) {
      //arr 是已有的字典数据 数组对象
      return arr.map(item => {
        return item.label
      }).join("/")
    }

<template>
  <div ref="container" class="el-table-colmun-dict">
    <div class="title">基础用法</div>
    <el-table :data="tableData1">
      <el-table-column-dict align="center" maskType="name" prop="name" label="姓名" min-width="100">
        <template #header="{column, $index }">
          {{ $index + "," + column.label }}
        </template>
      </el-table-column-dict>
      <el-table-column-dict align="center" maskType="idCard" prop="idCard" label="身份证号" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" maskType="mobile" prop="phone" label="手机号" min-width="100"></el-table-column-dict>
      <el-table-column-dict align="center" dictType="PERSON_TYPE" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dictType="PERSON_TYPE" dictTypeNode="button" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dictType="PERSON_TYPE" dictTypeNode="link" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dictType="PERSON_TYPE" dictTypeNode="text" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dictType="PERSON_TYPE" dictTypeNode="tag" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dictTreeType="area" prop="areaCode" label="所属地区" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" dateFormat="date" prop="birthday" label="出生日期" min-width="100"></el-table-column-dict>
      <el-table-column-dict maskType="address" prop="address" label="出生地" min-width="150"></el-table-column-dict>
      <el-table-column-dict align="center" :maskStart="4" :maskMiddle="5" :maskEnd="4" prop="code" label="统一信用代码" min-width="150"></el-table-column-dict>
    </el-table>

    <div class="title">设置默认值</div>
    <el-table :data="tableData2" >
      <el-table-column-dict defaultVal="张三" align="center" maskType="name" prop="name" label="姓名" min-width="100"></el-table-column-dict>
      <el-table-column-dict defaultVal="还没入户" align="center" maskType="idCard" prop="idCard" label="身份证号" min-width="150"></el-table-column-dict>
      <el-table-column-dict defaultVal="没手机" align="center" maskType="mobile" prop="phone" label="手机号" min-width="100"></el-table-column-dict>
      <el-table-column-dict defaultVal="不知道啥类型" align="center" dictType="PERSON_TYPE" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
      <el-table-column-dict defaultVal="不知道啥地区" align="center" dictTreeType="area" prop="areaCode" label="所属地区" min-width="150"></el-table-column-dict>
      <el-table-column-dict defaultVal="无人知晓" align="center" dateFormat="date" prop="birthday" label="出生日期" min-width="100"></el-table-column-dict>
      <el-table-column-dict defaultVal="未知" maskType="address" prop="address" label="出生地" min-width="150"></el-table-column-dict>
      <el-table-column-dict defaultVal="这家伙没企业" align="center" :maskStart="4" :maskMiddle="5" :maskEnd="4" prop="code" label="统一信用代码" min-width="150"></el-table-column-dict>
    </el-table>

    <div class="title">其他用法</div>
    <el-table :data="tableData3">
      <el-table-column-dict defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type1" label="人员类型1" min-width="150"></el-table-column-dict>
      <el-table-column-dict defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type2" label="人员类2" min-width="300"></el-table-column-dict>
      <el-table-column-dict defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type3" label="人员类型3" min-width="450"></el-table-column-dict>
    </el-table>
    <el-table :data="tableData4">
      <el-table-column-dict :formatFun="formatFun" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type1" label="人员类型1" min-width="150"></el-table-column-dict>
      <el-table-column-dict :formatFun="formatFun" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type2" label="人员类2" min-width="300"></el-table-column-dict>
      <el-table-column-dict :formatFun="formatFun" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type3" label="人员类型3" min-width="450"></el-table-column-dict>
    </el-table>
    <el-table :data="tableData5">
      <el-table-column-dict spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type1" label="人员类型1" min-width="150"></el-table-column-dict>
      <el-table-column-dict spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type2" label="人员类2" min-width="300"></el-table-column-dict>
      <el-table-column-dict spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type3" label="人员类型3" min-width="450"></el-table-column-dict>
    </el-table>
    <el-table :data="tableData5">
      <el-table-column-dict :formatFun="formatFun" spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type1" label="人员类型1" min-width="150"></el-table-column-dict>
      <el-table-column-dict :formatFun="formatFun" spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type2" label="人员类2" min-width="300"></el-table-column-dict>
      <el-table-column-dict :formatFun="formatFun" spacer="|" defaultValue="未知" align="center" dictType="PERSON_TYPE" prop="type3" label="人员类型3" min-width="450"></el-table-column-dict>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        {
          name: "沈小布",
          idCard: "350624202201011314",
          phone: "18851314520",
          type: "001",
          birthday: "2022-01-01",
          address: "宁夏回族自治区闽宁镇金滩村520街道1314号",
          code: "12345678901234567890",
          areaCode: "350600"
        },
        {
          name: "邱哞哞",
          idCard: "350624202201015200",
          phone: "18855201314",
          type: "003",
          birthday: "2022-01-01",
          address: "宁夏回族自治区闽宁镇金滩村1314街道520号",
          code: "98765432109876543210",
          areaCode: "350500"
        }
      ],
      tableData2: [
        {
          name: "沈小布",
          idCard: "350624202201011314",
          phone: "18851314520",
          type: "001",
          birthday: "2022-01-01",
          address: "宁夏回族自治区闽宁镇金滩村520街道1314号",
          code: "12345678901234567890",
          areaCode: "350624"
        },
        {
          name: "",
          idCard: "",
          phone: "",
          type: "",
          birthday: "",
          address: "",
          areaCode: "",
          code: ""
        }
      ],
      tableData3: [
        {
          type1: "001",
          type2: "002,003",
          type3: "002,003,004"
        },
        {
          type1: "001",
          type2: "002,004",
          type3: "001,003,005"
        }
      ],
      tableData4: [
        {
          type1: ["001"],
          type2: ["002", "003"],
          type3: ["002", "003", "004"]
        },
        {
          type1: ["001"],
          type2: ["002", "004"],
          type3: ["001", "003", "005"]
        }
      ],
      tableData5: [
        {
          type1: "001",
          type2: "002|003",
          type3: "002|003|004"
        },
        {
          type1: "001",
          type2: "002|004",
          type3: "001|003|005"
        }
      ]
    }
  },
  mounted() {},
  methods: {
    formatFun(arr) {
      //arr 是已有的字典数据 数组对象
      return arr.map(item => {
        return item.label
      }).join("/")
    }
  }
}
</script>

<style lang="less" scoped>
.el-table + .el-table {
  margin-top: 20px;
}
</style>

显示代码

普通字典类型

参数	说明	类型	可选值	默认值
dictType	树形字典时，字典类型由此字段传递	String	—	—
defaultVal	当返回数据没值时展示默认值	String	—	“”
formatFun	格式化展示数据形式，接收的是数组对象。	Function	—	多个时英文逗号隔开展示
spacer	返回字典数据多个时且为字符串时，定义后端数据间隔符号	String	—	","
dictTypeNode	展示的标签类型 [button, text, tag, text]	String	[button, text, tag, text]	""

树形字典类型

参数	说明	类型	可选值	默认值
dictTreeType	转化字典类型	String	—	—
defaultVal	当返回数据没值时展示默认值	String	—	“”
treeSetting	会与dictSetting中treesetting的配置合并	Object	—	同字典包配置
formatFunIn	对树形数据使用函数格式化	Function	—	/ 分隔
formatFunOut	对多个树形数据格式化	Function		, 分隔
spacer	返回字典数据多个时且为字符串时，定义后端数据间隔符号	String	—	","
dictTypeNode	展示的标签类型 [button, text, tag, text]	String	[button, text, tag, text]	""

日期格式化

参数	说明	类型	可选值	默认值
dateFormat	日期格式化，可从可选值中传，也可自定义格式，具体查看日期格式	String	date， month，datetime，time， year	—
defaultVal	当返回数据没值时展示默认值	String	—	—

脱敏

参数	说明	类型	可选值	默认值
maskType	数据脱敏,字符串类型时从可选值选 数字类型时表示展示前几位数	[String,Number]	mobile，name，address，idCard	—
defaultVal	当返回数据没值时展示默认值	String	—	—
maskEnd	展示后面几位	Number	—	—
maskMiddle	中间展示几个maskSymbol 无值则根据实际情况渲染个数	Number	—	—
maskStart	展示前面面几位	Number	—	—
maskSymbol	替代字符	String	—	*

WARNING

普通字典类型，树形字典类型，日期格式化，脱敏，四种不可同时使用，仅可使用一种，如同时配置，其优先级顺序为 dictType > dictTreeType > dateFormat > maskType || maskStart

日期格式

使用dateFormat指定日期数据返回的格式

WARNING

请注意大小写

标识	示例	描述
yy	18	年，两位数
yyyy	2018	年，四位数
M	1-12	月，从1开始
MM	01-12	月，两位数字
d	1-31	日
dd	01-31	日，两位数
h	0-23	24小时
hh	00-23	24小时，两位数
h	1-12	12小时
hh	01-12	12小时，两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数