vue3-element-dict

# 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("/")
    }

<script setup lang="ts">
import { ref } from "vue";
const tableData1 = ref([
  {
    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",
  },
]);

const tableData2 = ref([
  {
    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: "",
  },
]);

const tableData3 = ref([
  {
    type1: "001",
    type2: "002,003",
    type3: "002,003,004",
  },
  {
    type1: "001",
    type2: "002,004",
    type3: "001,003,005",
  },
]);

const tableData4 = ref([
  {
    type1: ["001"],
    type2: ["002", "003"],
    type3: ["002", "003", "004"],
  },
  {
    type1: ["001"],
    type2: ["002", "004"],
    type3: ["001", "003", "005"],
  },
]);

const tableData5 = ref([
  {
    type1: "001",
    type2: "002|003",
    type3: "002|003|004"
  },
  {
    type1: "001",
    type2: "002|004",
    type3: "001|003|005"
  }
])

const formatFun = (arr: any) => {
  //arr 是已有的字典数据 数组对象
  return arr.map((item: any) => {
        return item.label
      }).join("/")
}
</script>
<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"
        dictTreeType="area"
        prop="areaCode"
        label="所属地区"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        align="center"
        dateFormat="datetime"
        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"
        :desensitizationPlaceholder="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"
        desensitization="name"
        prop="name"
        label="姓名"
        min-width="100"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="还没入户"
        align="center"
        desensitization="idCard"
        prop="idCard"
        label="身份证号"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="没手机"
        align="center"
        desensitization="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="yyyy:MM:dd"
        prop="birthday"
        label="出生日期"
        min-width="100"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="未知"
        desensitization="address"
        prop="address"
        label="出生地"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="这家伙没企业"
        align="center"
        :maskStart="1"
        :maskMiddle="2"
        :maskEnd="3"
        prop="code"
        label="统一信用代码"
        min-width="150"
      ></el-table-column-dict>
    </el-table>

    <div class="title">其他用法</div>
    <el-table :data="tableData3">
      <el-table-column-dict
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type1"
        label="人员类型1"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type2"
        label="人员类2"
        min-width="300"
      ></el-table-column-dict>
      <el-table-column-dict
        defaultVal="未知"
        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"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type1"
        label="人员类型1"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        :formatFun="formatFun"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type2"
        label="人员类2"
        min-width="300"
      ></el-table-column-dict>
      <el-table-column-dict
        :formatFun="formatFun"
        defaultVal="未知"
        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="|"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type1"
        label="人员类型1"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        spacer="|"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type2"
        label="人员类2"
        min-width="300"
      ></el-table-column-dict>
      <el-table-column-dict
        spacer="|"
        defaultVal="未知"
        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="|"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type1"
        label="人员类型1"
        min-width="150"
      ></el-table-column-dict>
      <el-table-column-dict
        :formatFun="formatFun"
        spacer="|"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type2"
        label="人员类2"
        min-width="300"
      ></el-table-column-dict>
      <el-table-column-dict
        :formatFun="formatFun"
        spacer="|"
        defaultVal="未知"
        align="center"
        dictType="PERSON_TYPE"
        prop="type3"
        label="人员类型3"
        min-width="450"
      ></el-table-column-dict>
    </el-table>
  </div>
</template>
显示代码

# 普通字典类型

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

# 树形字典类型

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

# 日期格式化

参数 说明 类型 可选值 默认值
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 秒，两位数
上次更新: 5/12/2023, 1:10:57 AM

← cascader-dict联级选项 →