最近在开发过程中使用elementUI时，用到了复选框checkBox，但是因为绑定的数据是对象，无法做到数据的回显。然后又回头仔细的查看的文档，发现文档中介绍说checkBox和checkGroup通过v-model绑定的数据只能是number/string/Array，不支持绑定对象数据的。 之后在百度一番过后，发现百度上的提供的方法大多数都是直接去修改elementUI的源码，然后重新打包，
转载
2024-03-20 15:01:47
378阅读
先看图，你是否也遇到这个需求？如果你正在焦头烂额，无脑抓瞎，那么你来对地方了，因为我将给你一个简单易懂的实现方案。我也在网上翻了无数页答案，也照着别人的代码和思路尝试了，事实上并不能解决我这个棘手的问题。级联下拉选多选、懒加载、数据回显，尽管 ElementUI 已经很贴心，文档写的也很好。前两个很容易就可以实现，可是唯独数据回显被遗忘了，似乎忘记了数据回显应该是级联选择器必备的功能，很遗憾，需要
转载
2024-05-05 17:13:34
437阅读
1、级联选择器（el-cascader）先看一下效果吧，这个是选择的效果，支持多选，根节点禁选这个是回显的效果接下来说一下怎么实现吧~//其中platList为数据源,codeList是绑定选中的值，props为配置选项，clearable可清空（选完之后后面带一个删除的按钮）,handleToChange是选中值后触发的，可以在这个方法中绑定值
<el-cascader :options=
转载
2024-03-26 16:18:43
2555阅读
<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item>
1.回显数据 beginTime = '2021-01-11' endTime = '2021-01-19' 2.时间选择器数组 data(){ return{ date:[] } } 3.回显：使用数组的push方法，一定不要根据索引直接赋值，无用。 this.date.push(new Date ...
转载
2021-10-22 16:36:00
556阅读
2评论
vue + elementUI项目中，el-cascader级联选择器使用频率非常高，一些基本使用方法可以参考elementUI官方文档，本文主要研究当接口只返回最后一级id时，如何向上找出所有父级数据，并设置组件el-cascader的默认值！准备测试数据：方位、省、市区级联选择。var list = [
{
parent: 0,
value: 1,
lab
转载
2024-09-11 10:30:16
308阅读
1.级联选择器的html结构：<!-- 添加分类的对话框 -->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
<!-- 添加分类的表单 -->
&
转载
2024-03-15 09:58:50
154阅读
一、前言elementUI有说明文档，但我为什么还要重新写一下呢？因为文档也有坑，一开始使用时你复制进去，可能都没有效果。也不知道原因在哪，就如Backtop回到顶部的组件，不去看源码，真心不知道是怎么个所以然。一开始，我把这个组件放到我页面的底部，结果是无效果的，而且还会报css的这两个样式错误（.page-component__scroll .el-scrollbar__wrap），看完这个文
Vue 实现图片列表上传，拖拽排序，图片编辑（裁剪，马赛克，翻转等功能）上传用了element-ui组件可不用1、相关插件2、组件如何使用3、效果展示4、imgUpload封装的组件代码 1、相关插件1、 vue-cropper 裁剪，旋转，放大等功能 2、 vuedraggable 拖拽排序功能 3、element-ui，大家可以用 也可不用 我项目中用了，但是和图片编辑功能无关（但是和图片批
项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。(最新方法在最下面)那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：<el-table ref="multipleTable"
:data="carData"
:empt
转载
2024-02-19 14:05:25
1854阅读
如果有同学还没用过这个功能，可以先了解下：使用场景大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。解决方法现在的 elementPlus 已经有虚拟化
转载
2024-04-16 10:14:43
336阅读
ElementUI 官网 el-upload 组件使用：https://element.eleme.cn/#/zh-CN/component/upload作为一个经常使用 ElementUI 的 CV 程序员，el-upload 使用的次数也是很多的。相信大家在仅查看 el-upload 的使用示例时，也会遇到很多问题，甚至我记得我使用它的使用示例时也会出现无法生效的问题。但其实在使用过程中，如果
转载
2024-10-17 14:18:24
820阅读
vue+element 地址选择器（二级联动、三级联动），无需封装组件，嘎嘎好用 vue+element 最简单的地址选择器vue+element 地址选择器（二级联动、三级联动），无需封装组件，嘎嘎好用第一步，安装中国全省市区的数据第二步，在要使用地址选择器的页面导入数据第三步，直接上手操作3.1、最常见的三级联动（省、市、区）3.1.1、 省市区三级联动，纯汉字3.1.2、 省市区三级联动（区
转载
2024-09-28 21:55:56
800阅读
我最近在学vue，碰到各种意想不到的小问题，所以想写博客记录一下思路，以下是vue小白遇到问题的一点思考，成功解决问题的方法在文章最后。这段时间在用vue+element写前端项目，碰到了一个小问题，就是前端通过接口去请求后台数据，然后把数据渲染在页面上，element的下拉框el-select出现了一点儿问题 本来拿到性别sex的数据再渲染到页面上应该是这样的： 结果却是这样的： 我写的代码是这
element ui 使用说明element ui 简介Icon 图标Button 按钮Link 文字链接Radio 单选框TimePicker 时间选择器DateTimePicker 日期时间选择器 element ui 简介ElementUI是基于VUE2.0的组件库，提供了丰富的PC端组件。element ui 官方中文文档Icon 图标<!DOCTYPE html>
<
转载
2024-03-15 08:19:02
64阅读
这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧业务场景由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。问题描述使用Cascader级联选择器过程中主要存在的应用问题如下：1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导
转载
2024-08-26 09:23:50
201阅读
1.概述在上一篇文章的基础，做了测试，发现存在两个问题 第一，我们在点开权限分配时，没有把原本存在的数据显示在内容中——这里需要数据的回选。 第二，我们在选中一些内容后，下次点击时，还是存在选中的内容——这里需要清空上次选择过的数据。2.element-ui树形结构的数据回显使用2.1default-checked-keys属性使用使用此属性，需要把本身存在的属性做成一个数组，传递给此属性<
转载
2024-04-13 00:30:13
156阅读
一、问题全选，全不选，数据回显等问题！要做的比较灵活！最近做项目的时候，就遇到这些问题，下面从js和JQueyr两方面解决一下全选，全不选，数据回显的问题。 二、HTML页面 1 <input type="checkbox" id="checkAll"/>全选<br>
2 <input type="checkbox" name="media
前言在我们做项目时，可能会遇到许多树形展示的数据，在编辑时要求选择当前数据所在的上
原创
2023-03-06 10:45:43
5242阅读
1评论
级联回显解决**问题:单选的回显:多选的回显: **问题:项目需求是 级联选择器懒加载, 并且级联选择器有单选的回显和多选的回显, 一开始 单选还觉得挺容易, 但是多选 就 花了些时间研究才做出了.特地记录一下,因为没有看到讲的比较清楚的**单选的回显:注意点: (1) 单选回显只需要绑定 回显的 id 即可, 会自动根据id发起异步请求 (2) 回显id 要是 一条链, 就是 当前节点di和这个
转载
2024-04-24 22:49:27
190阅读
