table 中 columns 的 slots : { title: 'xxx' } 是否可换成 scopedSlots: { title: 'xxx' },

[chaiwei]

如果想要用一个 customTitle slot 来handle 所有的column header, 应该怎么写？

<template>
  <a-table :columns="columns" :data-source="data" >
      <span slot="customTitle"  slot-scope="text, record">
            <span :title="record.tooltips">{{ text }}</span>
      </span>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    tooltips: 'Name',
    scopedSlots: { title: 'customTitle' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    tooltips: 'Age (BirthYear)',
    slots: { title: 'customTitle' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

[chaiwei]

ant-design-vue/components/table/Table.tsx

Line 1115 in d028cce

{this.renderColumnTitle(column.title)}

感觉跟这个有点关系，可是不是很懂是否能更改

换成

ant-design-vue/components/table/Table.tsx

    {this.renderColumnTitle(column)} 

ant-design-vue/components/table/Table.tsx

    renderColumnTitle(column) {
      const { sFilters: filters, sSortOrder: sortOrder, sSortColumn: sortColumn } = this.$data;
      // https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167
      if (column.title instanceof Function) {
        return title({
          filters,
          sortOrder,
          sortColumn,
          column,
        });
      }
      return column.title;
    },

[chaiwei]

Oh, nvm.. Found the alternative solution with customHeaderCell.

References:
#1366
https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

 computedColumns() {
    if (Array.isArray(this.columns)) {
        let columns = [];
        this.columns.forEach(element => {
            if (element.tooltips && !element.customHeaderCell) {
                element.customHeaderCell = (column) => {
                    return { 
                        attrs: {
                            title: element.tooltips
                        }
                    }
                };
            }
            columns.push(element);
        });
        return columns;
    } else {
        return this.columns;
    }
},