Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(二)

ゝ一纸荒年。 2021-12-12 13:39 400阅读 0赞

在之前的一篇文章中，对S-Table组件的的数据加载和数据渲染，以及分页参数的使用进行了描述：

> [https://blog.csdn.net/gu\_wen\_jie/article/details/90702427][https_blog.csdn.net_gu_wen_jie_article_details_90702427]

这一篇中，我想展示的是关于如何使用`slot`插槽来进行一些数据的过滤展示，或者说成过滤不是太准确，但是用到的确实就是过滤器，`filters`,具体的场景就是：  
比如后端给你返回的一个字段：`type`,并且值为 1 ，你需要的是当type=1的时候展示成功，等于2的时候展示失败。  
像这样：  
![在这里插入图片描述][20190711142906364.png]  
在S-Table组件中，关于这一块有一个很简单的使用方法来完成这个工作。在这之前先来说下Vue中的过滤器filter

# Vue过滤器 filter #

过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。  
Vue中，过滤器是可以在Vue实例前进行全局注册的，也可以在某个组建中局部的使用  
**全局过滤器：**

Vue.filter('capitalize', function (value) { 
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({ 
      // ...
    })

**局部过滤器：**

filters: { 
      capitalize: function (value) { 
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

**这两个小例子中会发现，全局的时候写法是`filter`,局部中是`filters`,这一点要注意。**

过滤器可以用在两个地方：**双花括号插值和 `v-bind`表达式 (后者从 2.1.0+ 开始支持)** 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{
       { message | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>

并且，过滤器也是可以串联的：

{
       { message | filterA | filterB }}

在这个例子中，`filterA`被定义为接收单个参数的过滤器函数，表达式`message`的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 `filterB`，将 `filterA`的结果传递到 `filterB`中。

# 代码示例 #

大段的代码就不再展示了，参照[S-Table的使用(一)][https_blog.csdn.net_gu_wen_jie_article_details_90702427]  
javascript代码：

//其实通过观察上面的代码，能够很清楚的看到是怎么实现的，我们先定义了两个常量数组：`statusMap`，`showStatusMap`，用来提供过滤后数据，其中的`status`代表一个图标，也就是那个绿色或者红色的圆点，`text`代表过滤后需要展示的值，然后使用`filters`过滤器来对后端请求到的某些字段数据进行过滤。  
接下来看下渲染的时候如何写：

<s-table ref="stable" size="default" rowKey="key" :columns="columns" :showPagination=true :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :data="loadData" >
        <span slot="goods_state" slot-scope="goods_state">
             <a-badge :status="goods_state | statusTypeFilter" :text="goods_state | statusFilter" />
          </span>
          <span slot="is_show" slot-scope="is_show">
             <a-badge :status="is_show | showStatusTypeFilter" :text="is_show | showStatusFilter" />
          </span>
        </s-table>

在这里，你需要注意，因为是通过插槽和字段对应匹配渲染的，你不必担心两个span标签的位置，顺序，或者比如在列表中，这两个列在最后，在`s-table`标签中你可能担心渲染出来的位置是否正确，这个是没必要的，但是你最好按照列表中的展示顺序来写，方便以后维护。  
这样就完成了了S-Table组建中的局部过滤器，实现过滤功能。

[https_blog.csdn.net_gu_wen_jie_article_details_90702427]: https://blog.csdn.net/gu_wen_jie/article/details/90702427
[20190711142906364.png]: /images/20211211/d01967121a674b12aea9bce22cb3c56c.png