base-table 加入动态slot 流程 vue2

columns

{
    title: '字段标题',
    slot: 'yourSlotName',
    minWidth: 50,
    align: 'center'
  },

组件内

props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
mounted () {
    this.getSlot()

data () {
    return {
      slotArr: [],

methods: {
    getSlot () {
      this.slotArr = []
      this.columns.forEach(item => {
        if (item.slot) {
          this.slotArr.push(item.slot)
        }
      })
    },

组件外部调用

<base-table>
<template slot-scope="{ row, index }"
                slot="yourSlotName">
        <Button type="text"
                v-if="row.yourSlotName"
                @click="showData(index)"
                size="small">{{ row.yourSlotName}}</Button>
      </template>
</base-table>