vue复选框选中一个全选中了在业务开发中,使用了checkbox-group组件,发现点击其中的一个选项后,所有数据都被选中了,取消也是全部取消了。原因:绑定数据的时候,定义的是字符串,修改为数组即可。...
原创
2023-05-23 09:56:44
90阅读
vuejs浏览器查看比例(VueJS Tree)A highly customizable and blazing fast VueJs tree viewer. 高度可定制且快速的VueJs树查看器。 (Getting Started)(Install)You can install using yarn: 您可以使用yarn进行安装: $ yarn add vuejs-treeor with
<div class="form-group" id="rolelist"> <div class="col-xs-12"> <label for="exampleInputPassword1">角色</label> <div class="form-group" v-for="(item,index) in data">...
原创
2022-07-07 17:33:08
667阅读
情景描述:很多时候,如果一个树的数据父级节点太多,可能导致树需要展示的节点太多,这样不利于查找和勾选。所以,如果能对树的某一级父级节点进行筛选,每次筛选之后只展示该节点下的所有子节点,这样会增加查找和勾选子节点的操作效率。这里,采用ztree组件举例:1. 在树组件内加一个单选下拉框,下拉框绑定的数据是需要筛选的父级节点 列表。2. 切换该下拉框选项时,隐藏并展示相应的节点数据:systemCha
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </head> <body> <script sr
转载
2021-01-23 17:41:00
422阅读
2评论
a-table组件中加入以下两个属性:customRow="rowClick":rowClassName="rowClassName"/*** @Author: 路博欢* @Date: 2
原创
2023-03-09 17:22:40
743阅读
一、 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数
`v-xxx`
// -- 将值传到指令中
`v-xxx="value"`
tabs实现<template>
<div>
<div v-for="(item, index) in tabs"
:key="index"
class="coursespecialtyView-tabs-txt"
:class="{active: isActive(index)}"
@click="chan
原创
2023-09-13 22:17:19
434阅读
1. 效果展示当没有行被选中时,按钮是不可用的 当有行被选中时,该行高亮,同时按钮可用 再次点击该行,取消高亮,按钮不可用 2. 代码2.1 组件代码table设置了highlight-current-row,可以在选中某个数据行时,高亮该行。table设置了@row-click="handleRowClick",绑定了行点击事件,用于获取被点击的行数据。
转载
2024-05-23 12:17:37
5214阅读
<li v-for="(item, index) in 15" @click="clickcategory(index)" :class="{ active: categoryIndex == index }" > {{ index }} </li> return { categoryIndex:
原创
2022-04-21 13:32:32
946阅读
VUE 动态构建混合数据TREESELECT选择树,同时解决巨树问题
标签: vue java javascript vue.js
今天在项目中需要通过行政区域选择,然后选择该行政区域下面的景区,也就是要构建行政区划、景区两表数据表的树。全国的行政区域到县已经3500多了,再加上景区会有几万个点,这棵选择树不论是在后台还是在前台构建都比较大,会影响系统性能,需要前后端结合,动态构建,使用时
转载
2024-02-22 10:11:31
638阅读
html <div> 语言:<select v-model="selectClassEnd" @change="selectClass($event)"> <option v-for="(options,id) in selectClassData" :key="id" :value="option ...
转载
2021-09-07 17:21:00
3459阅读
2评论
对于vue.js动态绑定class样式,看了一些网上的帖子发现整理的都不太完整,特地好好整理了一下,由于都在学习中,有啥疑问、问题欢迎指正,一起来学习吧。由于3种Vue动态绑定样式测试所需要的css代码都是重复的,我们就把他提炼出来css代码:.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
刚开始入手Vue.js, 在获取select选中Option的Text的时候,首先想到的就是DOM操作,但是感觉这样很不Vue.后来打开调试器,调试了一下,发现:
原创
2021-04-30 19:07:48
3080阅读
iview vue 动态禁止table选中
原创
2022-07-17 00:01:20
197阅读
想要在 Vue 中实现一个这样的无限级树形选择器其实并不难,关键点在于利用 递归组件 和 高阶事件监听,下面我们就一步步来实现它。简单实现下样式创建 Tree.vue 组件(为方便阅读,代码有省略):<template>
<ul class="treeMenu">
<li v-for="(item, index) in data" :key="index"
vue中select设置默认选中 一、总结 一句话总结: 二、select设置默认选中实例 博客对应视频位置:1、vue中select设置默认选中https://fanrenyi.com/video/7/22 第14行:给select元素绑定的v-model的值是 默认option的value 第2
转载
2019-12-21 15:22:00
3431阅读
2评论
1.html 1 2 3 4 5 6 7
原创
2023-06-05 09:57:20
108阅读
第三步获取对应行的数据最后效果图踩坑经历今天搞了一下午可算搞懂了,网上我查了好多资料发现好像有点老了都比如这种的:<a slot=“action” href=“javascript:;” @click=“onUser(record)”>用户<a slot=“action” href=“javascript:;” @click=“onRole(record)”>权限slot、
之前一直是用elelement-ui实现树形图,现在需求需要修改为antd UI组件实现,在开发过程中出来了好几个坑,记录一下。 首先看一下要实现的效果: 1、可拖拽; 2、点击节点高亮,且点击请求当前节点对应的数据; 3、默认树形图的第一个节点高亮,且请求第一个节点的数据; 4、每个节点右侧需要一个添加的icon用来添加同级/子级节点;1、可拖拽【坑:】需要写onDrop方法 根据官网上的拖拽示
转载
2024-04-07 13:56:24
798阅读