Ant Design Vue 1.7.8：如何向表格标题作用域插槽传参

我使用Ant Design Vue 1.7.8版本，需要根据API获取的数据生成自定义表格列标题，尝试通过作用域插槽生成标题时，遇到无法向标题作用域传递数据的问题，且需要基于列数据添加非纯文本的自定义元素。

解决方案 #

在Ant Design Vue 1.7.x中，要给标题插槽传递数据，需在动态生成列时将数据挂载到列对象的自定义属性上，再通过Vue 2的slot-scope语法在插槽中接收并使用该数据。

修改后的完整代码示例 #

JavaScript部分

var Main = {
    data() {
      return {
        columns: [
          {
            title: 'Category',
            dataIndex: 'category',
          },
        ],
        myData: [
          {id: 1, category: 'a1', ch05: 34, ch07: 36, ch08: 37},
          {id: 2, category: 'a2', ch05: 54, ch07: 51, ch08: 32},
          {id: 3, category: 'a3', ch05: 88, ch07: 89, ch08: 91},
        ],
      }
    },
    mounted() {
      // 模拟API返回的渠道数据
      let channels = [
        {code: '05', name: 'General'},
        {code: '07', name: 'Clients'},
        {code: '08', name: 'Providers'}
      ];
      
      channels.forEach(channel => {
        let column = {
          dataIndex: 'ch' + channel.code,
          scopedSlots: { title: 'channelTitle'},
          // 将渠道数据挂载到列对象的自定义属性中
          channelInfo: channel
        };
        this.columns.push(column);
      });
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

CSS部分

.alertdiv {
  display: block;
  border:1px solid red;
  background-color: #f7e0e0;
  padding:3px 10px;
  margin: 0px 3px 30px 3px;
}

.custom-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-tag {
  margin-top: 4px;
  font-size: 12px;
}

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.css" />

<div id="app">
  <template>
    <div class="alertdiv">替换默认的<b>Channel xx</b>，每个列显示自定义标题（含非纯文本元素）</div>
    <a-table
      :columns="columns"
      :row-key="record => record.id"
      :data-source="myData"
    >
      <!-- 使用slot-scope接收列对象，获取挂载的渠道数据 -->
      <span slot="channelTitle" slot-scope="column">
        <div class="custom-title">
          <span>Channel {{ column.channelInfo.code }}</span>
          <a-tag class="title-tag" color="blue">{{ column.channelInfo.name }}</a-tag>
        </div>
      </span>
    </a-table>
  </template>
</div>

关键说明 #

• 动态生成列时，通过channelInfo: channel将渠道数据绑定到列对象上，作为自定义属性
• 在标题插槽中，通过slot-scope="column"获取当前列的完整对象，进而访问column.channelInfo拿到传递的数据
• 基于传递的数据，可以自由渲染非纯文本内容（示例中使用了Ant Design的Tag组件）

内容的提问来源于stack exchange，提问作者guyaloni