Vue项目中,使用高级表格vxe-table中的【vxe-grid】动态列之动态插槽
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)