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、最终效果如下: