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、动态列中动态插槽的使用方法：

  
    
    
      
      	
      	{{ row.data1 }}
      
    
  


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']
    };
  }
};

3、最终效果如下：