基于封装全局的el-table组件中添加过滤器

最新推荐文章于 2025-05-22 17:22:26 发布

Dcripple

最新推荐文章于 2025-05-22 17:22:26 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45990765/article/details/123573658

先看效果图：

没加过滤器时：

使用了过滤器之后：

先在调用table组件的页面中，导入过滤器，并在绑定的数据中定义filter

<table v-bind="{...tableConfig}">
</table>

 tableConfig: {
        loading: false,
        data: [],
        column: [
          TableHead('编号', 'code'),
          { ...TableHead('名称', 'name'),showOverflowTooltip: true },
          { ...TableHead('单位名称', 'unitName'), showOverflowTooltip: true },
          { ...TableHead('数量', 'counts') },
          { ...TableHead('单价（元）', 'amount'),filter:numFormats },
          { ...TableHead('合价（元）', 'totalAmount'),filter:numFormats },
        ]
      },

之后在el-table封装的组件中，将 item.filte