Vue项目中，使用高级表格vxe-table中的【vxe-grid】动态列之动态插槽

1、首先项目当中得安装了vxe-table

// 没有安装的话，可以使用一下命令安装
npm install vxe-table
或
yarn add vxe-table

使用示例：
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

2、动态列中动态插槽的使用方法：

<template>
  <vxe-grid :columns="columns" :table-data="tableData">
    <!-- 动态指定插槽名称 -->
    <template v-for="(slotName, index) in slotNames" v-slot:[slotName]="{ row }">
      <span>
      	<a-icon type='icon-wenjianjia'/>
      	{{ row.data1 }}
      </span>
    </template>
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
    	//表格列
      columns: [
        { field: 'data1', title: 'Data 1',slot:{default:'slot1'} },
        { field: 'data2', title: 'Data 2',slot:{default:'slot2'} }
        // 可以添加更多的列配置
      ],
      // 表格数据
      tableData: [
        { data1: 'A', data2: 'X' },
        { data1: 'B', data2: 'Y' }
        // 可以添加更多的数据
      ],
       // 动态插槽数据,这里的slot1 对应的就是columns数据里面的slot.default
       slotNames: ['slot1', 'slot2']
    };
  }
};
</script>

3、最终效果如下：