Vue antdev - 将参数传递给标题scopedSlots

Question

我使用 AntDesign Vue 版本 1.7.8（此处）。
我需要根据通过 API 获取的数据生成自定义列标题。

这就是我想出的生成具有范围的标题的方法，问题是我需要将一些数据传递到标题范围，并且不知道如何做到这一点：

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() {
      // Dynamically created by API access
      let channels = [
        {code: '05', name: 'General'},
        {code: '07', name: 'Clients'},
        {code: '08', name: 'Providers'}
      ];
      
      channels.forEach(channel => {
        let column = {
          //title: 'Channel ' + channel.code,
          dataIndex: 'ch' + channel.code,
          scopedSlots: { title: 'channelTitle'},
        };
        this.columns.push(column);
      });
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.min.js" integrity="sha512-o1PLXMVDD8r7lQlPXWHTyJxH7WpFm75dsSfzsa04HRgbeEHJv/EbaxEgACaB6mxbBmHU+Dl64MflqQB7cKAYpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.css" integrity="sha512-Zl/2o30l4LayZodj2IuRoBhZLgQNvKnnSTwB08236BoPAhbhhS8dZltQfyftSVdEVrJ43uSyh/Keh1t/5yP5Ug==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app">
  <template>
    <div class="alertdiv">Instead of <b>Channel xx</b>, each column should have its own custom title</div>
    <a-table
      :columns="columns"
      :row-key="record => record.id"
      :data-source="myData"
    >
      <span slot="channelTitle">
        Channel xx
      </span>
    </a-table>
  </template>
</div>

Answer 1

您可以在

ant

中使用 slots:{ title:'customTitle'} 作为标题。

在您的代码中，我删除了 DOM 并使用 ant 包创建自定义标头。

var Main = {
data() {
    return {
    columns: [
        {
        title: 'Category',
        dataIndex: 'category',
        },
        {dataIndex:'ch05', slots:{ title:'customCh05Title'},},
        {dataIndex:'ch07', slots:{ title:'customch07Title'},},
        {dataIndex:'ch08', slots:{ title:'customch08Title'},},
    ],
    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},
    ],
    }
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.min.js" integrity="sha512-o1PLXMVDD8r7lQlPXWHTyJxH7WpFm75dsSfzsa04HRgbeEHJv/EbaxEgACaB6mxbBmHU+Dl64MflqQB7cKAYpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.css" integrity="sha512-Zl/2o30l4LayZodj2IuRoBhZLgQNvKnnSTwB08236BoPAhbhhS8dZltQfyftSVdEVrJ43uSyh/Keh1t/5yP5Ug==" crossorigin="anonymous" referrerpolicy="no-referrer" />



<div id="app">
    <template>
        <div class="alertdiv">Instead of <b>Channel xx</b>, each column should have its own custom title</div>
        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="myData"
        >
        <span slot="customCh05Title">
            Custom Ch05 Title
            [<span style="color:blue"  v-for="data in 2">data {{ data  }},</span>]
        </span>
        <span slot="customch07Title">
            Custom Ch07 Title
            [<span style="color:green"  v-for="data in 2">data {{ data  }},</span>]
        </span>
        <span slot="customch08Title">
            Custom Ch08 Title
            [<span style="color:red"  v-for="data in 2">data {{ data  }},</span>]
        </span>

        </a-table>
    </template>
</div>