# el-table-colmun-dict组件
主要用于字典展示字典中文数据。
desensitization 支持数据脱敏，可以name姓名脱敏，mobile手机号脱敏，idCard身份证号脱敏，address地址脱敏，如果以上四种脱敏方式与需求不符，此字段可以传数字类型，表示展示数据前几项，再配合desensitizationEnd 展示后面几项，如果数据很长，需要省略中间 * 符号的个数，可以配置desensitizationPlaceholder表示中间展示几个 *
dateFormat配置日期格式，可传date， month，datetime，time， year 。如均不符合需求，可自定义格式，具体查看日期格式
dictType传递字典类型，会根据此字典类型，自动将值转化为中文
desensitization 支持数据脱敏，可以name姓名脱敏，mobile手机号脱敏，idCard身份证号脱敏，address地址脱敏，如果以上四种脱敏方式与需求不符，此字段可以传数字类型，表示展示数据前几项，再配合desensitizationEnd 展示后面几项，如果数据很长，需要省略中间 * 符号的个数，可以配置desensitizationPlaceholder表示中间展示几个 *
dateFormat配置日期格式，可传date， month，datetime，time， year 。如均不符合需求，可自定义格式，具体查看日期格式
dictType传递字典类型，会根据此字典类型，自动将值转化为中文
注意当数据字典需要展示多个时，数据需要返回【数组格式】或英文逗号“,”隔开
如果后端返回数据非逗号隔开，可配置spacer参数，配置后端返回数据隔开的符号。
默认返回数据是 ，隔开， 如 一等奖,二等奖,三等奖 如果这种逗号隔开的显示不是你想要的，可以通过formatFun配置返回的数据形式
formatFun(arr) {
//arr 是已有的字典数据 数组对象
return arr.map(item => {
return item.label
}).join("/")
}
<template>
<div class="el-table-colmun-dict">
<div class="title">基础用法</div>
<el-table :data="tableData1">
<el-table-column-dict align="center" desensitization="name" prop="name" label="姓名" min-width="100"></el-table-column-dict>
<el-table-column-dict align="center" desensitization="idCard" prop="idCard" label="身份证号" min-width="150"></el-table-column-dict>
<el-table-column-dict align="center" desensitization="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="date" prop="birthday" label="出生日期" min-width="100"></el-table-column-dict>
<el-table-column-dict desensitization="address" prop="address" label="出生地" min-width="150"></el-table-column-dict>
<el-table-column-dict align="center" :desensitization="4" :desensitizationPlaceholder="5" :desensitizationEnd="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 defaultValue="张三" align="center" desensitization="name" prop="name" label="姓名" min-width="100"></el-table-column-dict>
<el-table-column-dict defaultValue="还没入户" align="center" desensitization="idCard" prop="idCard" label="身份证号" min-width="150"></el-table-column-dict>
<el-table-column-dict defaultValue="没手机" align="center" desensitization="mobile" prop="phone" label="手机号" min-width="100"></el-table-column-dict>
<el-table-column-dict defaultValue="不知道啥类型" align="center" dictType="PERSON_TYPE" prop="type" label="人员类型" min-width="150"></el-table-column-dict>
<el-table-column-dict defaultValue="不知道啥地区" align="center" dictTreeType="area" prop="areaCode" label="所属地区" min-width="150"></el-table-column-dict>
<el-table-column-dict defaultValue="无人知晓" align="center" dateFormat="date" prop="birthday" label="出生日期" min-width="100"></el-table-column-dict>
<el-table-column-dict defaultValue="未知" desensitization="address" prop="address" label="出生地" min-width="150"></el-table-column-dict>
<el-table-column-dict defaultValue="这家伙没企业" align="center" :desensitization="4" :desensitizationPlaceholder="5" :desensitizationEnd="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: "20220101",
address: "宁夏回族自治区闽宁镇金滩村520街道1314号",
code: "12345678901234567890",
areaCode: "350600"
},
{
name: "邱哞哞",
idCard: "350624202201015200",
phone: "18855201314",
type: "003",
birthday: "20220101",
address: "宁夏回族自治区闽宁镇金滩村1314街道520号",
code: "98765432109876543210",
areaCode: "350500"
}
],
tableData2: [
{
name: "沈小布",
idCard: "350624202201011314",
phone: "18851314520",
type: "001",
birthday: "20220101",
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"
}
]
}
},
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>
显示代码
# Table Colmun Dict Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| dictType | 转化字典类型 | String | — | — |
| dictTreeType | 树形字典时，字典类型由此字段传递 | String | — | — |
| treeSetting | 会与dictSetting中treesetting的配置合并 | Object | — | 同字典包配置 |
| spacer | 返回字典数据多个时且为字符串时，定义后端数据间隔符号 | String | — | "," |
| formatFun | 格式化展示数据形式，接收的是数组对象。 | Function | — | 逗号隔开展示 |
| desensitization | 数据脱敏,字符串类型时从可选值选 数字类型时表示展示前几位数 | [String,Number] | mobile，name，address，idCard | — |
| dateFormat | 日期格式化，可从可选值中传，也可自定义格式，具体查看日期格式 | String | date， month，datetime，time， year | — |
| defaultValue | 当返回数据没值时展示默认值 | String | — | — |
| desensitizationEnd | 展示后面几位 | Number | — | — |
| desensitizationPlaceholder | 中间展示几个* 无值则根据实际情况渲染个数 | Number | — | — |
# 日期格式
使用dateFormat指定日期数据返回的格式
WARNING
请注意大小写
| 标识 | 示例 | 描述 |
|---|---|---|
| YY | 18 | 年，两位数 |
| YYYY | 2018 | 年，四位数 |
| M | 1-12 | 月，从1开始 |
| MM | 01-12 | 月，两位数字 |
| MMM | Jan-Dec | 月，英文缩写 |
| 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 | 秒，两位数 |
| S | 0-9 | 毫秒（百），一位数 |
| SS | 00-99 | 毫秒（十），两位数 |
| SSS | 000-999 | 毫秒，三位数 |
| Z | -05:00 | UTC偏移 |
| ZZ | -0500 | UTC偏移，两位数 |
| A | AM / PM | 上/下午，大写 |
| a | am / pm | 上/下午，小写 |
| Do | 1st... 31st | 月份的日期与序号 |