vxe-table 动态改变列 插槽

对于vxe-table动态改变列插槽，可以通过以下步骤实现：

1. 创建一个表格实例，并设置表格的数据源和列信息。

2. 在需要动态改变列的地方，使用v-if或v-show等指令来控制列的显示和隐藏。

3. 在表格中使用<template>标签定义插槽，并根据需要添加相应的列组件。

4. 在动态改变列的时候，通过修改表格的columns属性来动态改变表格的列信息。

5. 使用表格的refresh方法来更新表格的显示。

下面是一个示例代码：

<template>
  <div>
    <vxe-table :data="tableData" :columns="tableColumns">
      <template v-for="column in dynamicColumns" :slot="column.key">
        <vxe-table-column :key="column.key" :field="column.field" :title="column.title" :width="column.width"/>
      </template>
    </vxe-table>
    <button @click="toggleColumn('age')">Toggle Age Column</button>
  </div>
</template>

<script>
import { VXETable, Table, Column } from 'vxe-table'

export default {
  data () {
    return {
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Bob', age: 30 }
      ],
      tableColumns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 100 },
        { field: 'age', title: 'Age', width: 80 }
      ],
      dynamicColumns: [
        { key: 'age', field: 'age', title: 'Age', width: 80 }
      ],
      isAgeColumnVisible: true
    }
  },
  components: {
    'vxe-table': Table,
    'vxe-table-column': Column
  },
  methods: {
    toggleColumn (field) {
      this.isAgeColumnVisible = !this.isAgeColumnVisible
      if (this.isAgeColumnVisible) {
        this.dynamicColumns.push({ key: 'age', field: 'age', title: 'Age', width: 80 })
      } else {
        this.dynamicColumns = this.dynamicColumns.filter(column => column.field !== field)
      }
      VXETable.initColumn(this.dynamicColumns)
      this.$refs.table.refresh()
    }
  }
}
</script>

在上面的代码中，我们创建了一个包含3列数据的表格，并且动态添加一个Age列。通过点击按钮，我们可以控制Age列的显示和隐藏。在插槽中，我们定义了一个vxe-table-column组件，用于动态添加列。在toggleColumn方法中，我们通过修改dynamicColumns数组来动态改变Age列的显示和隐藏，并且使用VXETable.initColumn方法来重新初始化列信息，从而实现动态添加或删除列。最后，我们调用了表格的refresh方法来更新表格的显示。