easyui +vue v-slot 注意事项
https://www.jeasyui.com/demo-vue/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=CheckBox%20Selection&sort=asc
接口说明
<template><div><h2>Checkbox Selection</h2><DataGrid :data="data" style="height:250px"><GridColumn field="ck" :width="50" align="center"><template #header slot-scope="scope"><CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox></template><template #body slot-scope="scope"><CheckBox v-model="scope" @checkedChange="onCheckedChange($event)"></CheckBox></template></GridColumn><GridColumn field="itemid" title="Item ID"></GridColumn><GridColumn field="name" title="Name" width="30%"></GridColumn><GridColumn field="listprice" title="List Price" align="right"></GridColumn><GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn><GridColumn field="status" title="Status" align="center"></GridColumn></DataGrid><p>Checked Items: {{checkedRows.map(row=>row.code).join(',')}}</p></div>
</template><script setup lang="js">
import {DataGrid,GridColumn,CheckBox} from "v3-easyui";
</script><script lang="js">
export default {data() {return {data: [{code: "FI-SW-01",name: "Koi",unitcost: 10.0,status: "P",listprice: 36.5,attr: "Large",itemid: "EST-1",selected: true},{code: "K9-DL-01",name: "Dalmation",unitcost: 12.0,status: "P",listprice: 18.5,attr: "Spotted Adult Female",itemid: "EST-10"},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 38.5,attr: "Venomless",itemid: "EST-11"},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 26.5,attr: "Rattleless",itemid: "EST-12"},{code: "RP-LI-02",name: "Iguana",unitcost: 12.0,status: "P",listprice: 35.5,attr: "Green Adult",itemid: "EST-13"},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 158.5,attr: "Tailless",itemid: "EST-14"},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 83.5,attr: "With tail",itemid: "EST-15"},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 23.5,attr: "Adult Female",itemid: "EST-16"},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 89.5,attr: "Adult Male",itemid: "EST-17"},{code: "AV-CB-01",name: "Amazon Parrot",unitcost: 92.0,status: "P",listprice: 63.5,attr: "Adult Male",itemid: "EST-18"}],allChecked: false,rowClicked: false};},computed: {checkedRows() {return this.data.filter(row => row.selected);}},methods: {onAllCheckedChange(checked) {if (this.rowClicked) {return;}this.data = this.data.map(row => {return Object.assign({}, row, {selected: checked});});},onCheckedChange(checked) {this.allChecked = this.checkedRows.length === this.data.length;this.rowClicked = true;this.$nextTick(() => (this.rowClicked = false));}}
};
</script>
兼容型修改 v3-easyui,修改的示例代码,兼容 vue 最新版本

更准确的修改 , 引用网图

vue3 的语法 最终生效没有报错,查了一遍书 … …
<template><div><h2>Checkbox Selection</h2><DataGrid :data="data"style="width: 100%;height: 100%;":dblclickToEdit="true"selectionMode="row":pagination="true":total="data.length":pageSize="10"editMode="row"@editEnd="onEditEnd($event)"@cellClick="onCellClick($event)":clickToEdit="false"><GridColumn field="ck" :width="50" align="center"><template v-slot:header><CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox></template><template v-slot:body="scope"><CheckBox v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox></template></GridColumn><GridColumn field="itemid" title="Item ID"></GridColumn><GridColumn field="name" title="Name" width="30%"></GridColumn><GridColumn field="listprice" title="List Price" align="right" :editable="true"></GridColumn><GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn><GridColumn field="status" title="Status" align="center"></GridColumn></DataGrid></div>
</template><script setup lang="js">
import {DataGrid,GridColumn,CheckBox,Panel,Pagination} from "v3-easyui";
</script><script lang="js">
export default {data() {return {data: [{code: "FI-SW-01",name: "Koi",unitcost: 10.0,status: "P",listprice: 36.5,attr: "Large",itemid: "EST-1",selected: false},{code: "K9-DL-01",name: "Dalmation",unitcost: 12.0,status: "P",listprice: 18.5,attr: "Spotted Adult Female",itemid: "EST-10",selected: false},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 38.5,attr: "Venomless",itemid: "EST-11",selected: false},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 26.5,attr: "Rattleless",itemid: "EST-12",selected: false},{code: "RP-LI-02",name: "Iguana",unitcost: 12.0,status: "P",listprice: 35.5,attr: "Green Adult",itemid: "EST-13",selected: false},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 158.5,attr: "Tailless",itemid: "EST-14",selected: false},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 83.5,attr: "With tail",itemid: "EST-15",selected: false},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 23.5,attr: "Adult Female",itemid: "EST-16",selected: false},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 89.5,attr: "Adult Male",itemid: "EST-17",selected: false},{code: "AV-CB-01",name: "Amazon Parrot",unitcost: 92.0,status: "P",listprice: 63.5,attr: "Adult Male",itemid: "EST-18",selected: false}],allChecked: false,rowClicked: false};},computed: {checkedRows() {return this.data.filter(row => row.selected);}},methods: {onPageChange(event){console.log(event);},onAllCheckedChange(checked) {if (this.rowClicked) {return;}this.data = this.data.map(row => {return Object.assign({}, row, {selected: checked});});},onEditEnd(event){console.log(event);},onCellClick(event){console.log(event);},onCheckedChange(checked) {this.allChecked = this.checkedRows.length === this.data.length;this.rowClicked = true;this.$nextTick(() => (this.rowClicked = false));}}
};
</script>
最终可用的组件
绑定数据以后可以根据menu 动态更新分类数据
相关文章:
easyui +vue v-slot 注意事项
https://www.jeasyui.com/demo-vue/main/index.php?pluginDataGrid&themematerial-teal&dirltr&pitemCheckBox%20Selection&sortasc 接口说明 <template><div><h2>Checkbox Selection</h2><DataGrid :data"data" style&…...
vue之组件网站(后续补)
vue移动端 Vant 4 NutUI cube-ui vue电脑端 Element Plus OpenTiny Arco Design Ant Design Vue Vuetify Naive UI react移动端 react vant react移动端 Ant Design NutUI...
大模型的常用指令格式 --> ShareGPT 和 Alpaca (以 llama-factory 里的设置为例)
ShareGPT 格式 提出背景:ShareGPT 格式起初来自于用户在社交平台上分享与聊天模型的对话记录,这些记录涵盖了丰富的多轮对话内容。研究者们意识到,这类真实的对话数据可以帮助模型更好地学习多轮对话的上下文保持、回应生成等能力。因此&…...
【论文阅读】火星语义分割的半监督学习
【论文阅读】火星语义分割的半监督学习 文章目录 【论文阅读】火星语义分割的半监督学习一、介绍二、联系工作3.1Deep Learning for Mars3.2 数据集可以分为三类:3.3 半监督学习 三、提出的火星图像分割数据集四、方法四、实验 S 5Mars: Semi-Supervised Learning …...
ACM社团第一次测试题解(禁止直接复制粘贴提交)
第一题:中位数 思路: 解法一:暴力比较,两个数之间一直比较得出中位数 解法二:快排函数,数组中间值即为中位数 代码: 1.c语言版: #include <stdio.h> int arr[10010]; vo…...
redis:zset有序集合命令和内部编码
个人主页 : 个人主页 个人专栏 : 《数据结构》 《C语言》《C》《Linux》《网络》 《redis学习笔记》 文章目录 前言命令ZADDZRANGEZREVRANGEZCARDZCOUNTZPOPMAXBZPOPMAXZPOPMINBZPOPMINZRANKZSCOREZREMZREMRANGEBYRANKZREMRANGEBYSCOREZINCRBY集合间操作…...
Day107:代码审计-PHP模型开发篇MVC层RCE执行文件对比法1day分析0day验证
知识点: 1、PHP审计-MVC开发-RCE&代码执行 2、PHP审计-MVC开发-RCE&命令执行 3、PHP审计-MVC开发-RCE&文件对比 MVC 架构 MVC流程: Controller截获用户发出的请求;Controller调用Model完成状态的读写操作;Contr…...
Web服务nginx实验1访问特定目录
启动服务: 创建haha目录,并且在里面创建index.html文件,往里面写东西: 让客户端访问haha目录:(默认只会读取里面的index.html文件) 目录后面加/显示的是内容,不加则是代码࿱…...
数据结构之二叉树前序,中序,后序习题分析(递归图)
1.比较相同的树 二叉树不能轻易用断言,因为树一定有空 2.找结点值 3.单值二叉树 4.对称二叉树 5.前序遍历...
Me-LLaMA——用于医疗领域的新型开源大规模语言模型
摘要 大规模语言模型的出现是提高病人护理质量和临床操作效率的一个重大突破。大规模语言模型拥有数百亿个参数,通过海量文本数据训练而成,能够生成类似人类的反应并执行复杂的任务。这在改进临床文档、提高诊断准确性和管理病人护理方面显示出巨大的潜…...
C#-常见异常的处理方式(持续更新)
1、从网络位置加载程序集失败,默认不启用CAS策略 错误原因:使用 Assembly.LoadFile(dllPath) 加载外部Dll时,DotNET安全机制阻止加载一个本地网或互联网上的程序集。 解决方案: ①配置app.config文件,在runtime节点…...
「Mac玩转仓颉内测版2」入门篇2 - 编写第一个Cangjie程序
本篇详细介绍在Mac系统上创建首个Cangjie项目并编写、运行第一个Cangjie程序的全过程。内容涵盖项目创建、代码编写、程序运行与调试,以及代码修改后的重新运行。通过本篇,掌握Cangjie项目的基本操作,进一步巩固开发环境的配置,迈…...
注册登录学生管理系统小项目
头文件 #ifndef _LOGINLINK_H_ #define _LOGINLINK_H_ #include<myhead.h> typedef struct {int id;char name[20];int age; }stu,*Pstu; typedef struct node {union{int len;stu data;};struct node *next; }node,*Pnode; int regist(); int login(); Pnode create()…...
qt QCompleter详解
1、概述 QCompleter是Qt框架中的一个类,用于为文本输入提供自动完成功能。它可以与Qt的输入控件(如QLineEdit、QTextEdit等)结合使用,根据用户的输入实时过滤数据源,并在输入控件下方或内部显示补全建议列表。用户可以…...
YOLOv11融合特征细化前馈网络 FRFN[CVPR2024]及相关改进思路
YOLOv11v10v8使用教程: YOLOv11入门到入土使用教程 一、 模块介绍 论文链接:Adapt or Rerish 代码链接:https://github.com/joshyZhou/AST 论文速览:基于 transformer 的方法在图像恢复任务中取得了有希望的性能,因为…...
【前端知识】JS模块规范
JS模块规范 概述CommonJS 规范 代码示例AMD 规范 代码示例ES6 Module 规范 代码示例IIFE 规范 代码示例全局变量 代码示例 CommonJS 模块和 ES6 模块有什么区别?1. 语法和声明方式2. 动态和静态导入3. 循环依赖4. 默认导出和命名导出5. 文件扩展名6. 环境和应用7. 工…...
vue3展示pag格式动态图
提示:如果是webpack环境的,参考:Pag格式在vue3中的简单使用方法_pag文件-CSDN博客 下面展示的是在vite环境下配置pag 1、安装libpag npm i libpag --save 2、安装rollup-plugin-copy npm i rollup-plugin-copy --save 3、封装pag组件 下…...
代码随想录算法训练营第三十九天|Day39 动态规划
198.打家劫舍 视频讲解:https://www.bilibili.com/video/BV1Te411N7SX https://programmercarl.com/0198.%E6%89%93%E5%AE%B6%E5%8A%AB%E8%88%8D.html 思路 #define max(a, b) ((a) > (b) ? (a) : (b)) int rob(int* nums, int numsSize) {if(numsSize 0){ret…...
qt QMovie详解
1、概述 QMovie 是 Qt 框架中用于处理动画文件的类。它支持多种动画格式,包括 GIF 和一些常见的视频格式(尽管对视频格式的支持依赖于底层平台)。QMovie 类主要用于在 QLabel 或 QGraphicsView 等控件中显示动画。通过加载动画文件ÿ…...
数据集整理
系列博客目录 文章目录 系列博客目录1.Visual Genome数据集2.COCO数据集3.Flickr30k数据集10.集合多个数据集的网站 1.Visual Genome数据集 官网链接:https://homes.cs.washington.edu/~ranjay/visualgenome/index.html Visual Genome数据集梳理 Visual Genome数据…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
