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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

直播预告:告诉你最真实的网优行业内幕!

很多小伙伴在后台私信小编&#xff0c;说想学网优但是从来没接触过这一行&#xff0c;或者是接触过但是了解不多&#xff0c;零基础真的可以学吗&#xff1f;免费试学时间是多久&#xff1f;学完后有多少薪资&#xff1f;上课的方式是什么&#xff1f;需不需要出差&#xff1f;…

MySQL高可用搭建方案MHA

MHA架构介绍 MHA是Master High Availability的缩写&#xff0c;它是目前MySQL高可用方面的一个相对成熟的解决方案&#xff0c;其核心是使用perl语言编写的一组脚本&#xff0c;是一套优秀的作为MySQL高可用性环境下故障切换和主从提升的高可用软件。在MySQL故障切换过程中&am…

Python实现BOA蝴蝶优化算法优化随机森林分类模型(RandomForestClassifier算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝴蝶优化算法(butterfly optimization algorithm, BOA)是Arora 等人于2019年提出的一种元启发式智能算…

React之基础项目搭建

前言 React的生态系统非常庞大&#xff0c;拥有大量的第三方库和工具&#xff0c;如React Native&#xff08;用于构建原生移动应用&#xff09;、Next.js&#xff08;用于构建服务器渲染应用&#xff09;、Create React App&#xff08;用于快速搭建React应用的脚手架&#x…

【Linux】网络编程套接字二

网络编程套接字二 1.TCP网络编程1.1TCP Server服务端1.2 TCP Client客户端 2.Server 多进程版本2.1普通版2.2 信号版 3.Server 多线程版4.Server 线程池版5.日志函数重新设计6.守护进程7.TCP协议通讯流程8.TCP和UDP 对比 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&…

蓝桥杯真题Day48 倒计时5天 练了几道真题小程序+回溯剪枝应用一个小程序

[蓝桥杯 2023 省 A] 更小的数 题目描述 小蓝有一个长度均为 n 且仅由数字字符 0∼9 组成的字符串&#xff0c;下标从0到 n−1&#xff0c;你可以将其视作是一个具有n位的十进制数字num&#xff0c;小蓝可以从num 中选出一段连续的子串并将子串进行反转&#xff0c;最多反转一次…

C#基础--之数据类型

C#基础–之数据类型 在第一章我们了解了C#的输入、输出语句后&#xff0c;我这一节主要是介绍C#的基础知识&#xff0c;本节的内容也是后续章节的基础&#xff0c;好的开端等于成功的一半。在你阅读完本章后&#xff0c;你就有足够的C#知识编写简单的程序了。但还不能使用封装、…

基于PyAutoGUI图片定位的自动化截图工具--jmeter部分(2)

1、计划 压测完成后需要编写性能测试报告&#xff0c;报告中所需数据截图较多&#xff0c;使用自动化操作方便快捷&#xff0c;就编写一个界面工具以便后续复用。 基于PyAutoGUI图片定位的自动化截图工具–jmeter部分   使用pyautogui 库操作鼠标键盘&#xff0c;按钮根据截取…

汇舟问卷:做调查问卷需要准备什么?

大家好&#xff0c;我是汇舟问卷。海外问卷调查分为很多个种类&#xff0c;接触最多的有站点查、口子查和渠道查&#xff0c;每种调查的方式都是不一样的。 几年前口子查的操作门槛还是很低的&#xff0c;我们只需要在国外的社交网站上搜索调查问卷、调查这些类似的文字就能获…

MongoDB爬虫:(某扑)实战

https://bbs.hupu.com/bxj网页地址: https://bbs.hupu.com/bxj 然后我们在网页上定义帖子名称、帖子链接、创建时间、回复数、最后回复用户...... 除此之外,我们发现虎扑步行街最多显示的页数(20): 、 当我们打开第3页的时候,网页的URL的地址变为了:https://bbs.hupu.…

基于java+springboot+vue实现的西安旅游系统(文末源码+Lw)23-265

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统西安旅游系统信息管理难度大&#xff0c;容错率低&#…

一文看尽西周275年12王历史

周朝是中国历史上继商朝之后的第三个王朝。周王朝一共传国君 32 代 37 王&#xff0c;享国共计 790 年。周朝分为“西周”&#xff08;前 1046&#xff0d;前 771 年&#xff09;与“东周”&#xff08;前 770 年&#xff0d;前 256 年&#xff09;两个时期。 西周由周武王姬发…

Bug及异常:unity场景角色移动卡墙壁的问题

场景是一个小的杠铃形状封闭空间&#xff0c;美术没有给包围盒&#xff0c;我自己用blender做了一个&#xff08;属于兴趣爱好&#xff09;&#xff0c;如下&#xff1a; 导入场景中使用meshcollider做成空气墙&#xff0c;发现角色移动到角落继续行走会卡角落处&#x…

TSINGSEE青犀AI智能分析网关V4人员睡岗检测算法介绍及应用

人员睡岗AI算法是一种通过人工智能技术来检测和预警人员是否处于睡眠状态的算法。它主要通过分析人员的行为、姿势和身体特征等信息来判断人员是否已经进入睡眠状态。该算法通过对监控摄像头捕捉的画面进行实时分析&#xff0c;利用卷积神经网络&#xff08;CNN&#xff09;对图…

LongVLM:让大模型解读长视频 SOTA 的方法

LongVLM&#xff1a;让大模型解读长视频 SOTA 的方法 使用LongVLM处理长视频的步骤LongVLM 方法3.1 总体架构3.2 局部特征聚合3.3 全局语义整合 效果4.1 实验设置4.2 主要结果4.3 消融研究4.4 定性结果 论文&#xff1a;https://arxiv.org/pdf/2404.03384.pdf 代码&#xff1a…

适配器模式类图与代码

某软件系统中&#xff0c;已设计并实现了用于显示地址信息的类Address,现要求提供基于Dutch语言的地址信息显示接口。为了实现该要求并考虑到以后可能还会出现新的语言的接口&#xff0c;决定采用适配器(Adapter)模式实现该要求&#xff0c;得到如图7.9所示的类图。 【Java代码…

硬件学习件Cadence day16 做个笔记,BOM 位号这个参数输出的两种情况。

1. BOM 中位号有3种情况 1. 一种是位号生成时多行&#xff0c;每行是固定的位数。&#xff08;如下图所示&#xff09; 2. 一种是位号生成时只有一行&#xff0c;但是可以使用表格中自动换行功能&#xff0c;给他换行&#xff0c;但是这个位号本质上只有一行&#xff0c;只是因…

可视化后台管理系统-空框架

1.下载element-plus npm install element-plus --save 注意&#xff1a;element-ui不适配vue3&#xff0c;官方已将vue3版本的更新为element-plus 2.main.js配置 // 全局样式 import ./assets/main.cssimport { createApp } from vue import { createPinia } from piniaimpo…

【教学类-52-02】20240412动物数独02(四宫格)黏贴卡片

作品展示 背景需求 制作了动物数独4宫格后&#xff0c;需要再做一些黏贴上去的图片 【教学类-52-01】20240411动物数独&#xff08;4宫格&#xff09;-CSDN博客文章浏览阅读53次。【教学类-52-01】20240411动物数独01&#xff08;4宫格&#xff09;https://blog.csdn.net/rea…

中科方德服务器操作系统安装zabbix5.0

原文链接&#xff1a;中科方德服务器操作系统安装zabbix5.0 Hello&#xff0c;大家好啊&#xff01;接着我们上一次的讨论&#xff0c;今天我要为大家介绍如何在已经安装好的中科方德服务器操作系统基础上&#xff0c;安装和配置Zabbix 5.0。Zabbix是一个开源的监控软件工具&am…