当我们在使用Ant Design Vue的表格组件实现筛选、排序效果的时候， 例如：
<template> <a-table :columns="columns" :rowKey="record => record.login.uuid" :dataSource="data" :pagination="pagination" :loading="loading" @change="handleTableChange" > <template slot="name" slot-scope="name"> {{name.first}} {{name.last}} </template> </a-table> </template> <script> import reqwest from 'reqwest'; const columns = [ { title: 'Name', dataIndex: 'name', sorter: true, width: '20%', scopedSlots: { customRender: 'name' }, }, { title: 'Gender', dataIndex: 'gender', filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }], width: '20%', }, { title: 'Email', dataIndex: 'email', }, ]; export default { mounted() { this.fetch(); }, data() { return { data: [], pagination: {}, loading: false, columns, }; }, methods: { handleTableChange(pagination, filters, sorter) { console.log(pagination); const pager = { ...this.pagination }; pager.current = pagination.current; this.pagination = pager; this.fetch({ results: pagination.pageSize, page: pagination.current, sortField: sorter.field, sortOrder: sorter.order, ...filters, }); }, fetch(params = {}) { console.log('params:', params); this.loading = true; reqwest({ url: 'https://randomuser.me/api', method: 'get', data: { results: 10, ...params, }, type: 'json', }).then(data => { const pagination = { ...this.pagination }; // Read total count from server // pagination.total = data.totalCount; pagination.total = 200; this.loading = false; this.data = data.results; this.pagination = pagination; }); }, }, }; </script>页面效果是这样的： columns里可以设置调整宽度，filters是筛选条件，sorter可以排序，这样大致的效果就出来了。但是总是有一些“不安分”的UI设计出来特别的的图标，这可就尴尬了，只能改了。 怎么改呢？官方给的是filterIcon可以自定义图标，可filterIcon是个啥呢？ 用怎么用呢？filterIcon 可以写在slots中，是一个icon元素。
// 更改filter的图标 { title: 'Gender', dataIndex: 'gender', filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }], slots：{ filterIcon："@/public/images/checked.svg" // url地址 }, width: '20%', },这样就可以了么？不，你还得在表格中引入，具体参照slot的用法。
