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

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

https://blog.csdn.net/gu_wen_jie/article/details/90702427

这一篇中，我想展示的是关于如何使用slot插槽来进行一些数据的过滤展示，或者说成过滤不是太准确，但是用到的确实就是过滤器，filters,具体的场景就是：
比如后端给你返回的一个字段：type,并且值为 1 ，你需要的是当type=1的时候展示成功，等于2的时候展示失败。
像这样：

在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的使用(一)
javascript代码：

<script>
//这个是提供过滤后的数据
const statusMap = {
   1: {
       status: 'success',
       text: '在售中'
   },
   2: {
       status: 'error',
       text: '已下架'
   }
}
const showStatusMap = {
   1: {
       status: 'success',
       text: '展示'
   },
   2: {
       status: 'error',
       text: '隐藏'
   }
}
    ...
    ...
    export default {
	    data(){
		    return {
		    	...
		    	...
			    //然后看下表头配置
			    //这里看名字就能明白，检查：scopedSlots，并且给出了向过滤器filters中传递的自定义呈现的参数，就是customRender：goods_state，is_show...
			    columns: [
					...
					...
					 {
			            title: '售卖状态',
			            dataIndex: 'goods_state',
			            key: 'goods_state',
			            scopedSlots: { customRender: 'goods_state' }
			         },
			         {
			             title: '展示状态',
			             dataIndex: 'is_show',
			             key: 'is_show',
			             scopedSlots: { customRender: 'is_show' }
			         },
				],
				...
				...
			}
		},
		created () {

        },
        filters: {
            statusFilter (goods_state) {
                return statusMap[goods_state].text
            },
            statusTypeFilter (goods_state) {
                return statusMap[goods_state].status
            },
            showStatusFilter (is_show) {
                return showStatusMap[is_show].text
            },
            showStatusTypeFilter (is_show) {
                return showStatusMap[is_show].status
            },
        },
        ...
        ...
	}
</script>

//其实通过观察上面的代码，能够很清楚的看到是怎么实现的，我们先定义了两个常量数组：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组建中的局部过滤器，实现过滤功能。