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、最终效果如下:
在这里插入图片描述

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐