zylUseFilters 全局过滤函数

用途

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

安装

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

• 按需引入的方式需要单独注册；

//main.js

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

基础用法

复制代码

<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>

方法