ant design vue中遇到的问题总结（表格、提示框）

1.表格表头重写

① 首先在column配置的时候，不要写title!!!
② 其次在column中，加入slots: { title: 'customTitle' }，其中 customTitle可以为任意名称
③ 最后在代码中加入如下代码：

// slot的值与slots: { title: 'customTitle' }的title值保持一致
<template slot="customTitle">
  表头名称
  <a-icon type="smile-o" />  // 自定义
</template>

2.提示框title换行

<a-tooltip placement="top">
  <template slot="title">
    <span class="tooltip-text">这是一个例子，用于演示</span>
    <br/>  // 主要是用br
    <span class="tooltip-text">提示框换行</span>
  </template>
  <a-icon type="exclamation-circle" />
</a-tooltip>

3.提示框浮层渲染到父节点

<a-tooltip :get-popup-container="getPopupContainer">
  <template slot="title">
    <span class="tooltip-text">这是一个例子，用于演示</span>
    <br/>  // 主要是用br
    <span class="tooltip-text">提示框换行</span>
  </template>
  <a-icon type="exclamation-circle" />
</a-tooltip>
/**
 * 浮层渲染父节点，默认渲染到 body 上
*/
getPopupContainer(trigger) {
  return trigger.parentElement
}

4.表格排序将 取消排序 删除

// column配置
sortDirections: ['descend', 'ascend', 'descend']**

5.表格清空所有的排序

// Dom
<a-table
  :columns="columns"
  @change="handleChangeSort"
/>

// Data
computed: {
  columns() {
    let { sortedInfo } = this;
    sortedInfo = sortedInfo || {};
    const columns = [
      {
        key: 'a',
        dataIndex: 'a',
        title: '行业相关性',
        sorter: true,
        sortDirections: ['descend', 'ascend'],
        sortOrder: sortedInfo.columnKey === 'a' && sortedInfo.order  // 主要加这个
      },
      {
        key: 'b',
        dataIndex: 'superStock',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'b' },
        sorter: true,
        sortDirections: ['descend', 'ascend'],
        sortOrder: sortedInfo.columnKey === 'b' && sortedInfo.order // 主要加这个
      }]
    return columns;
  },
},
data () {
  return {
    sortedInfo: null
  }
},
methods: {
	handleChangeSort (pagination, _, sorter) {
	  this.sortedInfo = sorter  // 主要是这句话
	}	
}

// 最后在点击清除的事件中，写入  this.sortedInfo = null
// 例如，tab切换的时候，change事件中写入 this.sortedInfo = null