# zylUseFilters 全局过滤函数

# 用途

可以用于过滤字段和枚举一些数据字典的场景。

# 安装

全量引入的 zylUI 组件会通过Vue.filter自动注册如下表格列举的过滤函数，不需要单独注册；
按需引入的方式需要单独注册；

//main.js

// 按需引入
import { zylUseFilters } from '@zuiyouliao/zyl-ui'
Vue.use(zylUseFilters)

# 基础用法

王*虎	188****8888	4201**********3521	5.00	居民	2022-11-29 13:36	-
张*虎	05***87	4201**********6272	89.90	职工	2022-11-29 13:36	测**滤
李**容	155****5556	-	100.00	-	2022-11-29	-

复制代码<template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="attrTable">
      <el-table-column prop="name" label="姓名">
        <template slot-scope="{ row }">
          {{ row.name | zylName }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号/电话">
        <template slot-scope="{ row }">
          {{ row.phone | zylTel }}
        </template>
      </el-table-column>
      <el-table-column prop="idcard" label="身份证">
        <template slot-scope="{ row }">
          {{ row.idcard | zylIdcard }}
        </template>
      </el-table-column>
      <el-table-column prop="balance" label="余额（元）">
        <template slot-scope="{ row }">
          {{ row.balance | zylMoney }}
        </template>
      </el-table-column>
      <el-table-column prop="psnType" label="人员类型">
        <template slot-scope="{ row }">
          {{ row.psnType | zylGetLabel(psnTypeOptions) }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="创建日期">
        <template slot-scope="{ row }">
          {{ row.date | zylDataFormat('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="noValue"
        label="空值过滤测试"
        :formatter="
          (row, column, cellValue) => $options.filters.zylEmpty(cellValue)
        "
      >
        <template slot-scope="{ row }"> {{ row.noValue | zylName }} </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '王小虎',
          phone: '18888888888',
          idcard: '420101196602253521',
          balance: '5',
          psnType: '0',
          date: 1669728960813,
          noValue: '',
        },
        {
          name: '张小虎',
          phone: '0595-87687106',
          idcard: '420101196708126272',
          balance: '89.9',
          psnType: '1',
          date: 1669728960813,
          noValue: '测试有值能不能被过滤',
        },
        {
          name: '李小虎测试数据格式兼容',
          balance: 100, //余额为数字
          phone: 15555555556, //手机号为数字
          idcard: '', //值为空
          psnType: '3', //不存在的字典码
          date: '2022-11-29', //不是时间戳
          noValue: undefined, // noValue 不存在
        },
      ],
      psnTypeOptions: [
        { label: '居民', value: '0' },
        { label: '职工', value: '1' },
        { label: '军人', value: '2' },
      ],
    }
  },
  methods: {},
}
</script>

<style lang="scss" scoped></style>

在 JS 脚本内： this.$options.filters[过滤函数的方法名](被过滤的值, 参数)

不需要额外传参

// 用例

// 联系电话脱敏
let serinsTel = '18888888888'
serinsTel = this.$options.filters.zylTel(serinsTel)
console.log(serinsTel) // 188****8888

需要额外传参

// 用例

// 时间戳转换日期格式
let oprtTime = 1620955985458
oprtTime = this.$options.filters.zylDataFormat(oprtTime, '{y}-{m}-{d} {h}:{i}')
console.log(oprtTime) // 2021-05-14 09:33

# 补充：

若想所有表格项都能有空值缺省符号 '-'，且不想影响原有的 slot 结构过滤逻辑，我们可以巧妙利用 el-table-column 组件的属性 formatter 绑定 this.$options.filters.zylEmpty 方法。在formatter 执行的函数有结果而不是原数据返回时，显示权重大于 slot 内部的显示 zylEmpty 正是利用了这一点。

然后在每个表格项如下使用：

<!--用例-->
<el-table-column
  prop="noValue"
  label="空值过滤测试"
  :formatter="
      (row, column, cellValue) => $options.filters.zylEmpty(cellValue)
    "
>
  <template slot-scope="{ row }">{{ row.noValue | zylMoney }}</template>
</el-table-column>

# 方法

zylTel	电话/手机脱敏	val 电话号/手机号 string \| number	缺省文字 "-"
zylName	姓名脱敏	val 姓名 string	缺省文字 "-"
zylIdcard	身份证/银行卡脱敏	val 身份证/银行卡 string	缺省文字 "-"
zylDataFormatt (time, format, showEmptTxt)	时间戳日期过滤	time 时间戳 number format 自定义时间格式 string 参数: y年 m月 d日 h时 i分 s秒 a星期格式如："{y}-{m}-{d} {h}:{i}:{s}" showEmptTxt 为空时是否返回缺省文字 boolean 默认true返回缺省文字,fasle返回	缺省文字 "-"
zylMoney	金额过滤（精确到小数点后2位）	val 金额 string \| number	0.00
zylNum	数字过滤（主要过滤undefind不为NaN）	val 数字 string \| number	0
zylEmpty	空值过滤	val 任意值 string \| number	缺省文字 "-"
zylGetLabel (value, ary = [], format = { label: "label", value: "value" })	获取字典值名称	value 字典码值 string \| number ary 字典数据数组 array format 自定义数据格式 object 默认格式： { label: "label", value: "value" }	缺省文字 "-"

← zylUseFormValids 全局表单字段校验 zylUseTools 全局通用工具类 →