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

news2024/11/25 18:28:23

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1582820.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

苍穹外卖---文件上传-阿里OSS

一&#xff1a;开通阿里云对象存储服务oss,创建bucket&#xff0c;获得密钥 二&#xff1a;在程序中集成上传文件功能 1.连接阿里云OSS对象存储服务器 声明一个配置属性的文件用于传入连接的参数 package com.sky.properties;import lombok.Data; import org.springframewo…

电感在 DC/DC 变换器中的作用及选型指南

消费类应用是现代 DC/DC 变换器需求的主要驱动力。在这类应用中&#xff0c;功率电感主要被用于电池供电设备、嵌入式计算&#xff0c;以及高功率、高频率的 DC/DC 变换器。了解电感的电气特性对于设计紧凑型、经济型、高效率、并具备出色散热性能的系统至关重要。 电感是一种…

AI 对话完善【人工智能】

AI 对话【人工智能】 前言版权开源推荐AI 对话v0版本&#xff1a;基础v1版本&#xff1a;对话数据表tag.jsTagController v2版本&#xff1a;回复中textarea.jsChatController v3版本&#xff1a;流式输出chatLast.jsChatController v4版本&#xff1a;多轮对话QianfanUtilChat…

【分析 GClog 的吞吐量和停顿时间、heapdump 内存泄漏分析】

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容GClog分析以优化吞吐量和停顿时间步骤1: 收集GClog步骤2: 分析GClog步骤3: 优化建议步骤4: 实施优化 Heapdump内存泄漏分析步骤1: 获取Heapdump步骤2: 分析Heapdump步骤3: 定位泄漏对象步骤4: 分析泄漏原因步骤5: 修复泄漏…

linux服务使用./xxx.sh执行脚本命令

设置脚本文件为全权限 chmod 777 xxx.sh直接使用./xxxx.sh即可

go语言学习--4.方法和接口

目录 1.方法 2.接口 2.1结构体类型 2.2具体类型向接口类型赋值 2.3获取接口类型数据的具体类型信息 3.channel 3.1阻塞式读写channel操作 2.3非阻塞式读写channel操作 4.map 4.1插入数据 4.2删除数据 4.3查找数据 4.4扩容 1.方法 方法一般是面向对象编程(OOP)的一…

2万亿训练数据!Stable LM 2-12B加入开源队列

公*众*号&#xff1a;AI疯人院 4月9日&#xff0c;知名大型模型开源平台Stability.ai在其官网上发布了全新的类ChatGPT模型——Stable LM 2 12B。 据了解&#xff0c;Stable LM 2 12B模型拥有120亿个参数&#xff0c;其训练数据涵盖了英语、西班牙语、德语等7种语言的2万亿个…

【MATLAB源码-第179期】基于matlab的64QAM调制解调系统频偏估计及补偿算法仿真,对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 在通信系统中&#xff0c;频率偏移是一种常见的问题&#xff0c;它会导致接收到的信号频率与发送信号的频率不完全匹配&#xff0c;进而影响通信质量。在调制技术中&#xff0c;QPSK&#xff08;Quadrature Phase Shift Keyi…

《由浅入深学习SAP财务》:第2章 总账模块 - 2.6 定期处理 - 2.6.2 月末操作:GR/IR重组

2.6.2 月末操作&#xff1a;GR/IR重组 SAP在采购订单收货和发票校验时分别产生凭证&#xff0c;中间采用GR/IR过渡。GR即为收货&#xff0c;IR即为收票。月末&#xff0c;GR/IR的余额根据收货和收票的情况进行判断&#xff0c;转入“应付暂估”或“在途物资”&#xff0c;次月自…

【Python】FANUC机器人OPC UA通信并记录数据

目录 引言机器人仿真环境准备代码实现1. 导入库2. 设置参数3. 日志配置4. OPC UA通信5. 备份旧CSV文件6. 主函数 总结 引言 OPC UA&#xff08;Open Platform Communications Unified Architecture&#xff09;是一种跨平台的、开放的数据交换标准&#xff0c;常用于工业自动化…

4.19号驱动

1. ARM裸机开发和Linux系统开发的异同 相同点&#xff1a;都是对硬件进行操作 不同点&#xff1a; 有无操作系统 是否具备多进程多线程开发 是否可以调用库函数 操作地址是否相同&#xff0c;arm操作物理地址&#xff0c;驱动操作虚拟地址 2. Linux操作系统的层次 应用层…

Redis群集模式

目录 一、集群的作用 二、Redis集群的数据分片 三、集群的工作原理​编辑 四、搭建Redis群集模式 1.准备环境 1.1 首先安装redis 1.2 在etc下创建redis 1.3再在redis中创建redis-cluster/redis600{1..6}文件 1.4 做个for循环 1.5 开启群集功能 1.6启动redis节点 1.…

c语言---预处理详解(详解)

目录 一、预定义符号二、define 定义常量三、define定义宏四、带有副作用的宏参数五、宏替换的规则六、宏函数的对比七、#和##7.1 #运算符7.2 ##运算符 八、命名约定九、#undef十、命令行定义十一、条件编译十二、头文件的包含12.1头⽂件被包含的方式&#xff1a;12.1.1本地文件…

anylabeling使用和安装

源码地址&#xff1a; git clone https://github.com/vietanhdev/anylabeling.git Auto Labeling with Segment Anything Youtube Demo: https://www.youtube.com/watch?v5qVJiYNX5KkDocumentation: https://anylabeling.nrl.ai Features: Image annotation for polygon, r…

德勤:《中国AI智算产业2024年四大趋势》

2023年《数字中国建设整体布局规划》的发布&#xff0c;明确了数字中国是构建数字时代竞争优势的关键支撑&#xff0c;是继移动互联网时代以来经济增长新引擎。当我们谈论数字中国的构建&#xff0c;不仅仅是在讨论一个国家级的技术升级&#xff0c;而是关乎如何利用数字技术来…

StoryImager、Face Morph、Hash3D、DreamView、Magic-Boost、SmartControl

本文首发于公众号&#xff1a;机器感知 StoryImager、Face Morph、Hash3D、DreamView、Magic-Boost、SmartControl Eagle and Finch: RWKV with Matrix-Valued States and Dynamic Recurrence We present Eagle (RWKV-5) and Finch (RWKV-6), sequence models improving upon…

今日arXiv最热大模型论文:Dataverse,针对大模型的开源ETL工具,数据清洗不再难!

引言&#xff1a;大数据时代下的ETL挑战 随着大数据时代的到来&#xff0c;数据处理的规模和复杂性不断增加&#xff0c;尤其是在大语言模型&#xff08;LLMs&#xff09;的开发中&#xff0c;对海量数据的需求呈指数级增长。这种所谓的“规模化法则”表明&#xff0c;LLM的性…

Python爬虫之Scrapy框架基础

Scrapy爬虫框架介绍 文档 英文文档中文文档 什么是scrapy 基于twisted搭建的异步爬虫框架. scrapy爬虫框架根据组件化设计理念和丰富的中间件, 使其成为了一个兼具高性能和高扩展的框架 scrapy提供的主要功能 具有优先级功能的调度器去重功能失败后的重试机制并发限制ip使用次…

基于Spring Boot的网上商城购物系统设计与实现

基于Spring Boot的网上商城购物系统设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 商品信息界面&#xff0c;在商品信息页面可以查看商…

谷歌(Google)历年编程真题——生命游戏

谷歌历年面试真题——数组和字符串系列真题练习。 生命游戏 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&#xff0c;每一个格子都可以看成是一个细胞…