通过纯粹的vue、elementui通过el-dialog、el-tree、el-card扩展弹框，通过import导入

最新推荐文章于 2024-07-30 17:18:46 发布
最新推荐文章于 2024-07-30 17:18:46 发布
阅读量928 收藏 5
点赞数 1
分类专栏： vue 前端 文章标签： sass npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/115865948
版权
前端 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏

在项目的过程中会遇到各种各样的弹框形式；这里介绍一个我使用的弹框中的树形选择

不说太多直接上代码template模板中的代码

el-dialog中包含el-row，通过el-row去布局

右边的展示框和删除选中数据

通过import引入数据接口当然你写完的组件也可以成为局部组件和全局组件，全局组件需要在main.js中引入，这样不需要再使用import引入去使用，当然局部组件需要通过import去引入使用

各个模块的说明

data模块

mounted模块

methods

watch模块

希望对大家有帮助

lixu_boke
关注
专栏目录
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端
qq_37635012的博客
01-04 1487
最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端需要在用户点击保存的时候，前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来，如下图，用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等，当用户选中“武汉大学”后会将接口返回的信息回显
Vue项目引入引入ElementUI
热门推荐
anndy_的专栏
10-17 1万+
目录1、安装ElementUI2、在main.js中引入elementUI3、测试 ElementUI框架官网地址：https://element.eleme.cn/#/zh-CN/component/installation 1、安装ElementUI 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S i : 安装指令，全拼：install -S :生产环境，全拼：--save -D :开发环境，全拼：--save--dev -O
vue+element 设置弹窗_封装Vue Element的dialog弹窗组件
weixin_32567865的博客
02-11 1956
我本没有想着说要封装一个弹窗组件，但有同行的朋友在问我，而且弹窗组件也确实在项目开发中用的比较多。思前想后，又本着样式统一且修改起来方便的原则，还是再为大家分享一个我所封装的弹窗组件吧。其实，并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角...
el-tree的样式拓展
kunzedang_9528的博客
10-27 2359
最近项目中使用到了elementUI，不免会用到el-tree组件，但是el自带的样式不是很好看，这里我们把el-tree的样式进行拓展，话不多说，直接上干货 /*最外层背景色。 字体颜色*/ .el-tree { background: none; color: #82b0ec; } /*图标颜色*/ .el-tree-node__expand-icon {
如何去掉element-ui的el-card自带的padding
最新发布
weixin_43589681的博客
07-30 658
最近在项目中有大量用到element-ui的卡片布局,但是它本身自带的padding就非常影响后面进行样式调整,所以我是直接写行内样式去掉padding,设置body-style就可以了.
el-tree 在 el-dialog 显示时 重新加载 el-tree （el-tree采用懒加载）
海胆的博客
09-07 3348
原本的 el-tree 组件 在执行完 树节点 的懒加载后 就不会触发 load 若想重新加载需要 拿到树的根节点 然后清空子树 重新调用 load 的请求函数 请自行参考官方文档，只展示关键部分 if (node.level === 0) { this.node_had = node // 保存根节点 this.resolve_had = resolve ... 在需要重载的地方，添加如下代码 if (this.node_had) { this.no
关于el-dialog弹框注意事项以及el-tree
YasWestmere的博客
01-10 503
关于el-dialog弹框注意事项以及el-tree
el-dialog组件封装-El-Dialog---vue
yhr0322的博客
07-20 2459
废话不说了，直接上干货！（亲测好用） ** 1，封装Dialog.vue文件 ** <template> <div class="base-dialog"> <el-dialog :type="type" :width="width" :custom-class="customClass" :fullscreen="fullscreen" :tit
vue项目中所使用的element-UI / echarts
Stephy_Yy
12-15 2811
1.登录页面 < el-form > 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 pro...
Vue 项目实战四 商品分类 参数管理 table-tree
m0_55170432的博客
05-26 655
第三方插件vue-table-with-tree-grid 使用第三方插件vue-table-with-tree-grid展示分类数据 1).在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 2).打开main.js，导入vue-table-with-tree-grid import TreeTable from 'vue-table-with-tree-grid' .....
Vue 人资 实战篇五 组织架构页面 递归函数的调用、树形结构、效验规则、利用ref调用子组件的方法、通过debugger调试、加载进度条的使用
m0_55170432的博客
06-03 537
1.0 组织架构树形结构布局 目标：使用element-UI组件布局组织架构的基本布局 一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构 1.1 实现组织架构的头部内容 首先实现头部的结构，采用element的**行列布局 <el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space
element ui的el-upload的picture-card类型实现单图片选择上传
qq_40454506的博客
04-27 8542
el-upload的picture-card类型实现单图片选择 <template> <div class='dialog-module'> <el-dialog width="300px" destroy-on-close :title="dialog.title + '模块'" ...
elementUI Tree 树形控件 懒加载
weixin_44963140的博客
09-30 2094
自己做项目用到的懒加载方法 <template> <el-dialog class="depdialog" title="请选择" :visible.sync="depVisible" :close-on-click-modal="false" @close="depClose" width="45%" > ...
基于elementui开发组件，以el-dialog为例
weixin_45294459的博客
04-12 761
文件结构：组件写在components文件夹下 eldialog.vue文件内容 <template> <div> <el-dialog custom-class="edition-dialog" :visible.sync="dialogVisible" width="560px" :before-close="diaclose"> <div> <div&g..
element中dialog里放tree增加滚动条
weixin_61273407的博客
04-22 536
样式层 less : /deep/ .el-dialog { width: 20% !important; ::-webkit-scrollbar { width: 3px; height: 1px; } ::-webkit-scrollbar-thumb { //滑块部分 border-radius: 5px; background-color: #c1c1c1; } ::-webkit-scrollbar-track { ...
vue3中两个el-select下拉框选项相互影响
DZQ1223的博客
09-21 834
label: '1月' ,label: '2月' ,label: '3月' ,label: '4月' ,label: '5月' ,label: '6月' ,label: '7月' ,label: '8月' ,label: '9月' ,label: '10月' ,label: '11月' ,label: '12月' ,disabled: false, } , ] //把方法和数据返回出去 return {
el-tree,el-table,el-dialog表格对话框常见后台管理界面前端使用经验分享
qq_45163356的博客
03-25 1929
引言：其实编程思想是通过饿了么组件自身的方法，拿到组件上面的数据，拿这些数据进行查询条件或者进行下一步操作，饿了么组件上的回调函数不需要传参，在methods里可以直接定义参数接受 页面结构包括： 上部标签，下部 树结构 和 表格 分页，新增按钮弹出对话框 点击上面标签触发下面不同页面的展示，主要是click方法 @click="tab(1)" tab(e) { switch (e) { case 1: ..
element Tree扩展（更换图标，添加指引线）
m0_54625720的博客
08-30 793
element Tree
Element组件浅尝辄止2：Card卡片组件
渣渣砖
08-10 2262
根据官方说法：将信息聚合在卡片容器中展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值