当前位置: 首页 > news >正文

Vuestic 数据表格 使用demo

<template><br><div class="grid sm:grid-cols-3 gap-6 mb-6"><VaButton @click="()=>{for(const it in this.selectedItems){console.log(this.selectedItems);}}">参数设置</VaButton><VaButton>参数刷新</VaButton></div><br><VaDataTableclass="table-inline"v-model="selectedItems":items="items":columns="columns"selectable:per-page="perPage":current-page="CurrentPage"@selection-change="selectedItemsEmitted = $event.currentSelectedItems"><templatev-for="item in inputList":key="item"#[`cell(${item})`]="{ value, row }"><div><VaValue><VaInput:model-value="value"@change="($event) => {row.rowData[item] = $event.target.value;}"/></VaValue></div></template><template v-for="item in statusList" :key="item" #[`cell(${item})`]="{ value, row }"></template><template v-for="item in selectList" :key="item" #[`cell(${item})`]="{ value, row }"></template><template #bodyAppend><tr><td colspan="6"><div class="flex justify-center mt-4"><VaPaginationv-model="CurrentPage":pages="pages"/></div></td></tr></template></VaDataTable>
</template><script>
import { defineComponent } from "vue";
import {VaButton, VaInput, VaValue} from "vuestic-ui";export default defineComponent({components: {VaInput, VaValue, VaButton},data() {const items = [{id: 1,name: "Leanne Graham",username: "Bret",email: "Sincere@april.biz",phone: "1-770-736-8031 x56442",},{id: 2,name: "Ervin Howell",username: "Antonette",email: "Shanna@melissa.tv",phone: "010-692-6593 x09125",},{id: 3,name: "Clementine Bauch",username: "Samantha",email: "Nathan@yesenia.net",phone: "1-463-123-4447",},{id: 4,name: "Patricia Lebsack",username: "Karianne",email: "Julianne.OConner@kory.org",phone: "493-170-9623 x156",},{id: 5,name: "Chelsey Dietrich",username: "Kamren",email: "Lucio_Hettinger@annie.ca",phone: "(254)954-1289",},];const columns = [{ key: "id", sortable: true },{ key: "username", sortable: true },{ key: "name", sortable: true },{ key: "email", sortable: true },{ key: "phone", sortable: true },];return {inputList:["email","phone"],items,columns,perPage:10,CurrentPage: 1,selectedItems: [],selectedItemsEmitted: [],selectMode: "multiple",selectedColor: "primary",};},methods: {unselectItem(item) {this.selectedItems = this.selectedItems.filter((selectedItem) => selectedItem !== item);},},computed: {pages() {console.log(this.items.length);return this.perPage && this.perPage !== 0? Math.ceil(this.items.length / this.perPage): this.items.length;},},
});
</script>

使用的最新的模板进行修改时发行,示例代码中有些地方不兼容,进行修改

通用参数数据表的模板

在这里插入图片描述

样式在做调整

整合以后,后端就不在时CGI了,直接通过RESETFULL 接口传输数据,json格式是真的香

相关文章:

Vuestic 数据表格 使用demo

<template><br><div class"grid sm:grid-cols-3 gap-6 mb-6"><VaButton click"()>{for(const it in this.selectedItems){console.log(this.selectedItems);}}">参数设置</VaButton><VaButton>参数刷新</VaButt…...

考勤无忧,Zoho People助HR高效

云考勤系统提升数据准确性、无缝对接业务、节省成本、提高员工效率、保障安全。ZohoPeople作为云HRMS&#xff0c;集成考勤管理等功能&#xff0c;支持试用&#xff0c;助力企业高效管理。 一、使用云考勤管理系统&#xff0c;有哪些好处&#xff1f; 1、数据准确性得到保障 …...

已知一个法向量和一个点,求该平面的ModelCoefficients,并使用ProjectInliers将点云投影到该平面

#include <pcl/point_cloud.h> #include <pcl/point_types.h> #include <pcl/filters/project_inliers.h> #include <pcl/model_coefficients.h>// 假设法向量和一个点已知 float A 1.0; // 法向量的 x 分量 float B 0.0; // 法向量的 y 分量 floa…...

92.【C语言】数据结构之单向链表的查找,中间插入和删除,销毁

目录 1.链表的查找函数 2.链表的修改函数 3.链表的中间插入函数 1.在pos之前插入:SLTInsertBefore函数 1.借助头指针pphead 示意图 代码示例(写入SList.c) 头文件添加SLTInsertbefore的声明 main.c的部分代码改为 1.测试中间插入 2.测试头部插入 3.测试pos为NULL的…...

WPF+MVVM案例实战(七)- 系统初始化界面字体描边效果实现

文章目录 1、案例效果展示2、项目准备3、功能实现1、资源获取2、界面代码3、后台代码4 源代码获取1、案例效果展示 2、项目准备 打开项目 Wpf_Examples,新建系统初始化界面 WelcomeWindow.xmal,如下所示: 3、功能实现 1、资源获取 案例中使用的CSDN文字为路径文字,从字体…...

基于 C# 的 AI 算法测试方法

基于 C# 的 AI 算法测试方法 在当今人工智能蓬勃发展的时代&#xff0c;AI 算法的质量和可靠性至关重要。对于使用 C# 开发的 AI 算法&#xff0c;我们需要一套有效的测试方法来确保其性能、准确性和稳定性。本文将详细探讨基于 C# 的 AI 算法测试方法&#xff0c;帮助开发者更…...

Find My画框|苹果Find My技术与画框结合,智能防丢,全球定位

画框通常用于保护和固定艺术品&#xff0c;尤其是绘画作品。它是一种可以展示艺术品的框架&#xff0c;用于保护艺术品免受损坏或污染。艺术品被放置在画框内&#xff0c;可以避免受到空气、尘土和其他外部因素的损害。同时&#xff0c;画框还可以增强艺术品的展示效果&#xf…...

布谷语音源码服务器搭建环境及配置流程

布谷语音源码部署环境安装要求&#xff08;只有在相同的环境下才更容易避免一些不必要的麻烦&#xff09;&#xff1a;●安装Center OS 7.9&#xff0c;我们自己的服务器使用的是7.9建议相同系统&#xff0c;非强制●安装宝塔环境&#xff08;强烈推荐使用&#xff09;●安装软…...

算法|牛客网华为机试21-30C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试10-20C 文章目录 HJ21 简单密码HJ22 汽水瓶HJ23 删除字符串中出现次数最少的字符HJ24 合唱队HJ25 数据分类处理HJ26 字符串排序HJ27 查找兄弟单词HJ28 素数伴侣HJ29 字符串加解密HJ30 字符串合并处理 HJ21 简单密码 题目描…...

Tomcat servlet response关于中文乱码的经验

前言 最近修改老项目项目&#xff0c;使用zuul网关返回的中文内容乱码了&#xff0c;如果使用GBK或者GB2312编码确正常显示&#xff0c;稍微实验了一下&#xff0c;发现里面很多细节&#xff0c;毕竟Springboot对我们做了很多事情&#xff0c;而且当我们使用不同的模式会出现很…...

WebGIS开发丨从入门到进阶,全系列课程分享

WebGIS开发所需的技能 1.前端技能&#xff1a;Html、CSS、 Javascript、WebAPLs、Vue 2.二维技能&#xff1a;WebGIS基础理论及开发、MapGIS二次开发Openlayers、Leaflet、Mapbox 、Echarts、公共开发平台开发等 3.三维技能&#xff1a;Blender、Three.js、Cesium等 Web开发…...

C++ 模板专题 - 标签分派(Tag Dispatching)

一&#xff1a;概述: 在 C 中&#xff0c;Tag Dispatching 是一种编程技巧&#xff0c;主要用于在编译期根据不同的类型或特征选择不同的函数重载或代码分支。Tag Dispatching 借助类型标签&#xff08;tags&#xff09;进行函数调度&#xff0c;用于在模板中实现编译期的静态分…...

如何解决RabbitMQ消息的重复消费问题

什么情况下会导致消息的重复消费——在消费者还没成功发送自动确认机制时发生&#xff1a; 网络抖动消费者挂了 解决方案 每条消息设置一个唯一的标识id幂等方案&#xff1a;【Redis分布式锁、数据库锁&#xff08;悲观锁、乐观锁&#xff09;】 面试官&#xff1a;如何解决…...

Java调用chatgpt

目前openai的chatgpt在国内使用有一定难度&#xff0c;不过国内的大模型在大部分情况下已经不弱于chatgpt&#xff0c;而且还更便宜&#xff0c;又能解决国内最敏感的内容安全问题。本文后续以spring ai调用国内chatgpt厂商实现为例&#xff0c;讲解怎么构建一个java调用chatgp…...

将你的 Kibana Dev Console 请求导出到 Python 和 JavaScript 代码

作者&#xff1a;来自 Elastic Miguel Grinberg Kibana Dev Console 现在提供将请求导出到可立即集成到你的应用程序中的 Python 和 JavaScript 代码的选项。 你使用过 Kibana 开发控制台吗&#xff1f;这是一个非常棒的原型设计工具&#xff0c;可让你以交互方式构建和测试 El…...

成都世运会志愿者招募报名流程及证件照制作方法

成都世运会志愿者招募正在如火如荼地进行中&#xff0c;许多热心公益的青年们纷纷报名参与。本文将详细介绍如何通过官方渠道报名&#xff0c;并使用手机来自行制作符合要求的4:5比例的白底证件照。 一、志愿者报名流程概述首先&#xff0c;报名成都世运会志愿者需要通过官方指…...

大数据技术的前景如何?

在当今数字化迅猛发展的时代&#xff0c;大数据技术的前景显得尤为广阔。随着数据量的激增&#xff0c;如何有效利用这些数据成为了各行各业关注的焦点。未来五年&#xff0c;大数据技术的发展趋势可以从市场规模、技术融合、行业应用和政策支持等多个方面进行深入分析。 1. 市…...

LLM | 论文精读 | 基于大型语言模型的自主代理综述

论文标题&#xff1a;A Survey on Large Language Model based Autonomous Agents 作者&#xff1a;Lei Wang, Chen Ma, Xueyang Feng, 等 期刊&#xff1a;Frontiers of Computer Science, 2024 DOI&#xff1a;10.1007/s11704-024-40231-1 一、引言 自主代理&#xff08;…...

详解Redis相关缓存问题

目录 缓存更新策略 定期⽣成 实时⽣成 缓存淘汰策略 Redis内置缓存淘汰策略 缓存预热 缓存穿透 缓存雪崩 缓存击穿 缓存更新策略 定期⽣成 每隔⼀定的周期(⽐如⼀天/⼀周/⼀个⽉), 对于访问的数据频次进⾏统计. 挑选出访问频次最⾼的前 %N的数据. 实时⽣成 先给缓存…...

ubuntu 24 (wayland)如何实现无显示器远程桌面

ubuntu 24默认采用的是wayland而非x11&#xff0c;查过文档vnc对wayland的支持不是很好&#xff0c;折腾了好久&#xff0c;弄了一个如下的方案供参考&#xff1a; 硬件条件 需要一个显卡欺骗器或者可以接HDMI口作为视频信号源输出的设备。 将ubuntu的主机的HDMI输出接到该硬…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...