首页 > 其他分享 >vue前端引用Jquery完成复选框多选

vue前端引用Jquery完成复选框多选

时间:2024-02-22 20:23:48浏览次数:24  
标签:Jquery vue 多选 JavaScript 复选框 ui element 序列化

vue2前端引用Jquery完成复选框多选

通常我们使用element-ui中el-table的多选模板完成列表的多选,但是有时需要把表格进行拆分,此时仅凭element-ui中的控件可能无法实现拆分后的多选。由于vue是JavaScript的前端框架,所以我考虑使用js来实现。jQuery作为JavaScript 的补充和扩展,可以更高效地编写 JavaScript 代码,在npm中也有相关的引用。

1、下载 jQuery依赖包

npm i jquery -S

2、引入jquery

import $ from "jquery";

3、element-ui的el-checkbox的绑定属性:label=""中无法绑定实体对象,我们先把绑定的对象序列化,并在其改变事件中来获取选中的复选框的值(已序列化为json格式的字符串),将其反序列化后加入到定义的数组中即可,如下图:

最后,就可以是实现复选框的多选了!

参考文档:npm官网Element-UI

标签:Jquery,vue,多选,JavaScript,复选框,ui,element,序列化
From: https://www.cnblogs.com/keepingstudying/p/18028056

相关文章

  • Web应用_6. Vue3
    title:(在线学习平台)link:(https://www.acwing.com/)cover:(https://cdn.acwing.com/media/activity/surface/log.png)Vue官网1配置环境1.1终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。1.2安装Nodejs安装地址1......
  • Vue学习笔记11--事件
    示例一:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Vue事件的基本使用</tit......
  • Vue中的$nextTick有什么作用?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、NextTick是什么官方对其的定义在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM什么意思呢?我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vu......
  • vue3+elment-plus项目,el-diglog的按钮,内部是el-form的子组件,那么保存时,如何触发子组件
    问题:el-diglog的按钮,如何触发内部的form表单提交el-dialog是父组件,cengji是子组件代码如下:<el-dialogv-model="dialogVisible"title="层级结构管理"width="1000"><cengji:tableId="tableId"/><template#footer>......
  • vue2项目 热更新慢解决方案
    问题1构建速度慢问题2每次保存文件,热更新卡94%AssetOptimization这一步上停顿十几秒解决方案一:npmihtml-webpack-plugin-for-multihtml--save-dev文件build/webpack.dev.conf.jsconstHtmlWebpackPlugin=require('html-webpack-plugin')替换为constHtml......
  • Vue学习笔记10--数据代理
    数据代理:通过一个对象代理对另一个对象属性的操作(读或写) 代码如下所示:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • ant design vue a-transfer使用vuedraggable穿梭框拖动效果
    npminstall vuedraggable--save vue<template><a-formlayout="vertical"><a-form-itemlabel="模板"><a-transfershow-search:data-source="tableFieldSource"......
  • Vue学习笔记9--Object.defineProperty()
    Object.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性obj需要定义属性的当前对象Object.defineProperty(obj,prop,desc)==》obj需要定义属性的当前对象prop当前需要定义的属性名desc属性描述......
  • 使用Vue实现数据的模糊匹配
    采用方法v-model自定义属性computedv-for实现思路首先使用v-model获取用户输入的关键字;采用Vue中的自定义属性,返回符合条件的数据;最后使用v-for指令,展示结果。实例展示<divid="app"><inputtype="text"v-model="keyword"placeholder="请输入年龄">......
  • 使用delete和Vue.delete删除数组元素的区别
    JavaScript中的delete运算符可以删除对象的属性,但是它不适用于数组。如果你试图使用delete运算符删除数组中的元素,你会发现该元素的值变为undefined,而数组的长度并没有改变。Vue.js提供了一个名为Vue.delete的方法,它可以帮助我们在删除数组元素时触发响应式更新。与原生JavaScrip......