easyui +vue v-slot 注意事项

news2024/11/25 15:49:14

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 动态更新分类数据

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

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

相关文章

unity搭建场景学习

unity搭建场景学习 创建场景创建gameobject创建材质&#xff0c;用于给gameobject上色拖拽材质球上色上色原理设置多个材质方式设置贴图的方式 效果设置光滑度一些预览设置菜单渲染模型与碰撞模型网格渲染参数1. materials(材质)2. lighting(光照)3. reflection probes(反射探针…

软件加密与授权管理:构建安全高效的软件使用体系

“软件加密与授权管理&#xff1a;构建安全高效的软件使用体系”是一个全面且深入的议题&#xff0c;以下是对该议题的详细探讨&#xff1a; 一、软件加密的概念与重要性 软件加密是指为软件添加保护措施&#xff0c;以防止其被盗版或非法复制。这一技术站在软件开发者的角度&a…

【VScode】中文版ChatGPT编程工具-CodeMoss!教程+示例+快捷键

文章目录 1. 多模型选择2. 编辑快捷键3. 历史记录收藏 CodeMoss使用教程1. 安装CodeMoss插件2. 配置AI模型3. 使用快捷键4. 进行代码优化与解释5. 收藏历史记录 总结与展望 在当今快速发展的编程世界中&#xff0c;开发者们面临着越来越多的挑战。如何提高编程效率&#xff0c;…

宝塔Linux面板安装PHP扩展失败报wget: unable to resolve host address ‘download.bt.cn’

一、问题&#xff1a; 当使用宝塔面板安装PHP扩展失败出现如下错误时 Resolving download.bt.cn(download.bt.cn)...failed: Connection timed out. wget: unable toresolve host address download.bt.cn’ 二、解决&#xff1a; 第一步&#xff1a;如下命令执行拿到返回的I…

Scrapy源码解析:DownloadHandlers设计与解析

1、源码解析 代码路径&#xff1a;scrapy/core/downloader/__init__.py 详细代码解析&#xff0c;请看代码注释 """Download handlers for different schemes"""import logging from typing import TYPE_CHECKING, Any, Callable, Dict, Gener…

【C++】对左值引用右值引用的深入理解(右值引用与移动语义)

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 天高地阔&#xff0c;欲往观之。 ​ 目录 前言&#xff1a;对引用的底层理解 一、左值与右值 提问&#xff1a;左值在左&#xff0c;右值在右&#xff1f;…

docker下迁移elasticsearch的问题与解决方案

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 docker下迁移elasticsearch的问题与解决方案 数据挂载报错解决权限问题节点故障 直接上图&#x…

1.3 初探OpenCV贡献库

OpenCV贡献库&#xff08;opencv_contrib&#xff09;是OpenCV的一个扩展库&#xff0c;由社区开发&#xff0c;包含更多视觉应用和受专利保护的算法。它提供最新研究算法、扩展功能和社区支持。可以通过pip安装或手动编译。

太空旅游:科技能否让星辰大海变为现实?

内容概要 在这个快速变化的时代&#xff0c;太空旅游成为了一个让人热血沸腾的话题。想象一下&#xff0c;坐在一颗漂浮的太空舱里&#xff0c;手中端着饮料&#xff0c;眺望着无尽的星辰大海&#xff0c;简直就像科幻电影中的情节一样。不过&#xff0c;这不仅仅是一个空洞的…

智能提醒助理系列-jdk8升级到21,springboot2.3升级到3.3【性能篇】

本系列文章记录“智能提醒助理”产品建设历程&#xff0c;记录实践经验、巩固知识点、锻炼总结能力。 本篇介绍技术栈升级后的切换方案以及性能提升。 一、需求出发点 智能提醒小程序 当前使用的是jdk8&#xff0c;springboot2.3,升级到jdk21和springboot3.3 学习新知识的同时…

ROS2入门学习——ROS在机器人中的运行

一、入门级基础平台TurtleBot TurtleBot 是 ROS 中重要且资源丰富的机器人之一&#xff0c;特别适合入门级机器人爱好者提供基础平台。用户可以直接利用其自带的软硬件&#xff0c;专注于应用程序的开发。TurtleBot 随着 ROS 的发展&#xff0c;一直处于开发前沿。 TurtleBot…

cuda、pytorch-gpu安装踩坑!!!

前提&#xff1a;已经安装了acanoda cuda11.6下载 直接搜索cuda11.6 acanoda操作 python版本3.9 conda create -n pytorch python3.9conda activate pytorch安装Pytorch-gpu版本等包 要使用pip安装&#xff0c;cu116cuda11.6版本 pip install torch1.13.1cu116 torchvi…

二分法查找(c基础)

二分法查找一个有序数组中是否有某个数 大家看了可以自己写一下 &#xff08; 要用知识点 数组 while循环 scanf 函数 printf函数 &#xff09; //用二分法查找 #include<stdio.h> int main() {char arr[] { 1,2,3,4,5,6,7,8,9,10 };int sz sizeof(arr) / size…

实现图书管理系统

1. 图书管理系统菜单 如上图给用户选项 1. 管理员 2. 普通用户 2. 实现基本框架 右键点src&#xff0c;选择new&#xff0c;选择Package命名三个包 book operation user 1.先选择book包&#xff0c;new两个类 book bookList 在book类中定义书的基本属性&#xff0c;并重写…

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记 这是新国立和新加坡管理大学发表在ECCV2024上的一篇image restoration的文章&#xff0c;提出了一个新的网络结构ECMA&#xff0c;从实验结果上看在超分&#xff0c;去噪&#xff0c;去模糊…

不需要复制粘贴,重复内容如何使用Mac快速完成输入

在Mac的日常使用中&#xff0c;必然有着重复内容需要重复输入的需求&#xff0c;但是Mac的剪切板又不具备历史记录的功能&#xff0c;所以只能一次次的复制粘贴&#xff0c;费时费力&#xff0c;那么该如何才能不这么麻烦 快捷短语就是为了解决这一问题而存在的 提前在设置好…

ubuntu20.04 加固方案-设置限制su命令用户组

一、编辑/etc/pam.d/su配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/pam.d/su文件。 vim /etc/pam.d/su 二、添加配置参数 在打开的配置文件的中&#xff0c;添加以下参数&#xff1a; auth required pam_wheel.so 创建 wheel 组 并添加用户 …

002 配置YUM国内镜像源

打开XShell 工具&#xff0c;连接Linux 选择上次的连接&#xff0c;直接双击。 具体连接步骤&#xff0c;参考前面的内容001 编辑YUM默认配置文件 /etc/yum.repos.d/CentOS-Base.repo 是YUM的默认配置文件。 修改这个文件&#xff0c;将其中的内容替换成国内的镜像源 输入下…

【工具变量】大数据管理机构改革DID(2007-2023年)

数据简介&#xff1a;数字ZF是指以新一代信息技术为支撑&#xff0c;重塑政务信息化管理架构、业务架构、技术架构的现代化治理模式。随着数字政府的建设&#xff0c;特别是借助大数据等新一代数字技术&#xff0c;极大地提升了政府的治理能力&#xff0c;从而起到辅助监管机构…

WPF+MVVM案例实战(二十一)- 制作一个侧边弹窗栏(AB类)

文章目录 1、案例效果1、侧边栏分类2、AB类侧边弹窗实现1.文件创建2、样式代码与功能代码实现3、功能代码实现 3 运行效果4、源代码获取 1、案例效果 1、侧边栏分类 A类 &#xff1a;左侧弹出侧边栏B类 &#xff1a;右侧弹出侧边栏C类 &#xff1a;顶部弹出侧边栏D类 &#xf…