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格式是真的香

https://vuejs.org/guide/components/props

props 属性配置设置

<template><crud :items="mut_items.table" :columns="columns" :per-page="perPage" :input-list="input_list"@refresh_params="refresh" @set_params=null></crud>
</template><script lang="ts">
import {defineComponent, reactive} from "vue";
import Crud from "@/components/util/crud.vue";
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",},
];export default defineComponent({components: {Crud},data(){const input_list = ["name"];const columns = [{ key: "id", sortable: true },{ key: "username", sortable: true },{ key: "name", sortable: true },{ key: "email", sortable: true },{ key: "phone", sortable: true },];return {counts:0,mut_items:reactive({table:items}),columns,input_list,perPage: 10,}},methods:{refresh(selected){this.mut_items.table.push({ id: 5,name: "Chelsey Dietrich",username: "Kamren",email: "Lucio_Hettinger@annie.ca",phone: "(254)954-1289"});}}
});

父组件的使用方法

使用响应式数据

mut_items:reactive({table:items})

在使用route 修改路由,获取参数分类

书上说Vue 的设计思路 大体上 View -> [ViewModle] -> Modle

在这里插入图片描述

可以达到预期

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入了解 美国高防 CN2 :如何提升全球化业务的网络安全与性能

美国高防 CN2 的重要性 在跨国企业和全球化业务的不断扩展下&#xff0c;对高性能和安全的网络连接需求不断增加。美国高防 CN2&#xff08;Global Internet Access&#xff09;以其卓越的跨境传输效率和强大的防护能力&#xff0c;成为许多企业关注的焦点。尤其是对电商、游戏…

NVR批量管理软件/平台EasyNVR多个NVR同时管理支持视频投放在电视墙上

在当今智能化、数字化的时代&#xff0c;视频监控已经成为各行各业不可或缺的一部分&#xff0c;无论是公共安全、交通管理、企业监控还是智慧城市建设&#xff0c;都离不开高效、稳定的视频监控系统的支持。而在这些应用场景中&#xff0c;将监控视频实时投放到大屏幕电视墙上…

新材料产业数据管理:KPaaS平台的创新驱动

近日&#xff0c;工业和信息化部、财政部、国家数据局联合印发《新材料大数据中心总体建设方案》&#xff08;以下简称《建设方案》&#xff09;&#xff0c;为新材料产业的发展注入了强大动力。该方案规划清晰&#xff0c;目标明确&#xff0c;旨在充分发挥大数据、人工智能对…

AI代币是什么?AI与Web3结合的未来方向在哪里?

近两年随着人工智能的崛起&#xff0c;AI已经渗透到制造业、电商、广告、医药等各个行业&#xff0c;加密货币领域也不例外&#xff0c;人工智能与区块链的融合&#xff0c;让我们看到了独特的数字资产 — AI加密代币。 它的流行始于2022年底&#xff0c;随着OpenAI智能聊天机…

关于springboot跨域与拦截器的问题

今天写代码的时候遇到的一个问题&#xff0c;在添加自己设置的token拦截器之后&#xff0c;报错&#xff1a; “ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:112:14) at Axi…

基于微信小程序实现信阳毛尖茶叶商城系统设计与实现

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…

FPGA开发verilog语法基础1

文章目录 主体内容1.1 逻辑值1.2 数字进制格式1.3 数据类型1.3.1 寄存器类型1.3.2 线网类型1.3.3 参数类型1.3.4 存储器类型 参考资料 主体内容 1.1 逻辑值 1&#xff0c;逻辑0&#xff0c;表示低电平 2&#xff0c;逻辑1&#xff0c;表示高电平 3&#xff0c;逻辑X&#xff0…

Java阶段三02

第3章-第2节 一、知识点 面向接口编程、什么是spring、什么是IOC、IOC的使用、依赖注入 二、目标 了解什么是spring 理解IOC的思想和使用 了解IOC的bean的生命周期 理解什么是依赖注入 三、内容分析 重点 了解什么是spring 理解IOC的思想 掌握IOC的使用 难点 理解IO…

Android Preference浅析(设置Setting)

各位&#xff0c;好久不见&#xff0c;最近时间较为充裕&#xff0c;更新一下博客。 本篇在我的理解、认识范围内&#xff0c;讲述一下Android中的Preference&#xff08;破粉斯~&#xff09;这玩意&#xff0c;常用于项目中的设置模块中。在工作中我也主要负责了设置模块相关…

鸿道Intewell操作系统架构介绍之Intewell-Hyper I 虚拟化构型

鸿道Intewell-Hyper I 虚拟化构型是鸿道Intewell-V虚拟化架构下的构型体系&#xff01;鸿道Intewell-V是科东软件自主研发的实时虚拟化操作系统&#xff0c;包括鸿道Intewell-Hyper I 和鸿道Intewell-Hyper II。鸿道Intewell-V可以实现多个操作系统在同一物理硬件上并行运行&am…

讲一讲 kafka 的 ack 的三种机制?

大家好&#xff0c;我是锋哥。今天分享关于【K讲一讲 kafka 的 ack 的三种机制&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲一讲 kafka 的 ack 的三种机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka的消息确认机制&…

多租户系统的应用架构

大家好&#xff0c;我是汤师爷~ 我们看下多租户系统的应用架构是如何从一层层构建起来的。 1、应用层设计 应用层的主要作用是为具体的用户场景提供应用服务&#xff0c;帮助用户在特定场景下完成操作。通过编排领域层的各项能力&#xff0c;实现SaaS产品的核心功能。应用层包…

波兰喜嘎嘎

之前做的一个项目&#xff0c;需要用c写一个服务去访问和控制硬件。这个服务是同事写的&#xff0c;今年年中离职了&#xff0c;很自然地&#xff0c;轮到我接手。 一、认知 我捣鼓了几天&#xff0c;勉强读懂一点原来的代码&#xff0c;并在原来基础上&#xff0c;做了一些修…

基于LORA的一主多从监测系统_4G模块上巴法云

临时添加一个更新&#xff0c;更换云平台为巴法云&#xff0c;事情的起因是因为阿里云这个老六&#xff0c;早上睡了一觉起来发短信告诉我云平台给我停了&#xff0c;得交钱&#xff0c;好嘛&#xff0c;不过也没办法现在这基本都收费&#xff0c;当然还有onenet可以用&#xf…

.NET Core WebApi第4讲:控制器、路由

一、控制器是什么&#xff1f; 1、创建一个空的API控制器&#xff1a;TestController.cs 2、里面有一个类叫TestController&#xff0c;把它叫做控制器 因为它继承了ControllerBase类&#xff0c;ControllerBase类里提供了一系列的方法&#xff0c;使得TestController这个类具…

Java面试经典 150 题.P55. 跳跃游戏(009)

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public boolean canJump(int[] nums) {int…

计算机网络网络层笔记

互联网提供的两种服务 1.虚电路服务 2.数据报服务 需要记住的是现在只用第二种也就是数据报服务 网际协议IP 物理层的中断系统:转发器(hub) 链路层的中断系统:交换机 网络层的中断系统:路由器 网络层以上:网关 如上图所示,网关是用来访问其他的网段的一个接口,网关的地…

【热门主题】000015 大数据治理:开启数据价值新纪元

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

CentOS8.5.2111(4.1)数据中心主DNS部署

【背景】 某公司的数据中心DC&#xff0c;要架设DNS服务器负责解析“学生姓名缩写.cqie”的域名解析工作。DNS服务器的FQDN&#xff08;完全正式域名标识&#xff09;为dns.姓名.cqie&#xff0c;IP地址为192.168.学号.66。要求为以下域名实现正反向域名解析服务。&#xff08…