ant Vue a-table 表格自定义表头事件

<a-table
	ref="table"
	size="middle"
	bordered
	rowKey="id"
	:columns="columns"
	:loading="loading"
	:dataSource="dataSource"
	:pagination="ipagination">
		<span slot="name" slot-scope="text">{{ text }}</span>
       	<template slot="customTitle">
       		<span style="cursor: pointer" @click="Click">Name</span>
            <span class="ant-table-column-sorter" @click="Click" style="cursor: pointer">
            	<div class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
                	<a-icon
                		type="caret-up"
                		:style="{ color: Type ? '#1890ff' : '#bfbfbf' }"
                		class="anticon anticon-caret-up ant-table-column-sorter-up off">
                	</a-icon>
                	<a-icon
                		type="caret-down"
                		:style="{ color: !Type ? '#1890ff' : '#bfbfbf' }"
                		class="anticon anticon-caret-down ant-table-column-sorter-down off">
                	</a-icon>
                  </div>
              </span>
          </template>
</a-table>

export default {
	data() {
		return {
            Type: true,
            // 表头
            columns: [
                {
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center',
                    slots: { title: 'customTitle' },
                    scopedSlots: { customRender: 'name' },
                }
           ]
		}
	},
	methods: {
        Click() {
            this.Type= !this.Type
            if (this.Type) {
                this.$set(this.params, 'type', '降序')
            } else {
                this.$set(this.params, 'type', '升序')
            }
            // 参数处理完成，查询table列表
            this.loadTableData()
        },
	}
}