草庐IT

Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。非全屏时: 全屏时:开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。后来去官方文档里找,找到一个属性:popper-append-to-body;解释说明是:是否将弹出框插入至body元素。在弹出框的定位出现问题时,可将该属性设置为false。那就试试,将属性加上之后,果然全屏状态下没有问题了 可随之而来新的问题产生,非全屏状态下,我的下拉菜单无法完全显示出来了! 这应该也是不将弹出框插入至bod

Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。非全屏时: 全屏时:开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。后来去官方文档里找,找到一个属性:popper-append-to-body;解释说明是:是否将弹出框插入至body元素。在弹出框的定位出现问题时,可将该属性设置为false。那就试试,将属性加上之后,果然全屏状态下没有问题了 可随之而来新的问题产生,非全屏状态下,我的下拉菜单无法完全显示出来了! 这应该也是不将弹出框插入至bod

elementUI使用el-upload上传文件写法总结及避坑,上传图片/视频到本地/服务器以及回显+删除

ElementUpload上传ElementUpload官方文档:el-upload具体细节只看官方文档,本篇主要介绍避坑点和用法总结注意点以及坑本地上传想要回显图片视频,使用on-success是没办法再在上传后获取到本地文件路径后进行回显的,因为只有在上传的action成功,即不报错的情况下才会调用,本地上传用的action="#这个接口不存在,所以也不会上传成功,更不会调用获取到文件参数进行回显如果想要先在本地进行回显,然后再上传的话,需要使用on-change钩子(还需:auto-upload="false")获取文件本地路径,再生成一个formData传给后端上传文件的接口,官方文档

elementUI使用el-upload上传文件写法总结及避坑,上传图片/视频到本地/服务器以及回显+删除

ElementUpload上传ElementUpload官方文档:el-upload具体细节只看官方文档,本篇主要介绍避坑点和用法总结注意点以及坑本地上传想要回显图片视频,使用on-success是没办法再在上传后获取到本地文件路径后进行回显的,因为只有在上传的action成功,即不报错的情况下才会调用,本地上传用的action="#这个接口不存在,所以也不会上传成功,更不会调用获取到文件参数进行回显如果想要先在本地进行回显,然后再上传的话,需要使用on-change钩子(还需:auto-upload="false")获取文件本地路径,再生成一个formData传给后端上传文件的接口,官方文档

element ui el-table表格宽度根据元素宽度自适应

需求要将元素全部展示,用户自己拖动滚动条来查看元素。第一步设置表格内的元素不会自动隐藏,本人用的SCSS,使用样式穿透达到这一效果.table::v-deep.el-table.cell{white-space:nowrap;text-overflow:unset;}初始html,将fit设置为false,使伸缩窗口大小不会改变tablejs代码如下,模拟调用接口created(){this.getData()},methods:{getData(){setTimeout(()=>{this.tableData.push({month:'2022-05',date:'2022-05-18',c

element ui el-table表格宽度根据元素宽度自适应

需求要将元素全部展示,用户自己拖动滚动条来查看元素。第一步设置表格内的元素不会自动隐藏,本人用的SCSS,使用样式穿透达到这一效果.table::v-deep.el-table.cell{white-space:nowrap;text-overflow:unset;}初始html,将fit设置为false,使伸缩窗口大小不会改变tablejs代码如下,模拟调用接口created(){this.getData()},methods:{getData(){setTimeout(()=>{this.tableData.push({month:'2022-05',date:'2022-05-18',c

element-ui中el-table点击其他自定义按钮展开table中某一行

element-ui中el-table点击其他自定义按钮展开table中某一行在日常开发中,我们遇见了会有点击某些按钮,使得表格行展开的需求,这时候去查看文档element-ui(table)这里官方提供了示例为在行最左侧有一个展开合并icon,但是点其他地方不能展开,我们又想点其他地方而展开我们看见是在table-column上定了type为expand,而该列里面的自定义模板便是展开后显示的内容我们想要实现点击自定义功能,继续查阅文档:这里的expand-row-keys文档解释说可以设置当前已展开的行,那么我们可以给table绑定这个属性,在点击方法里面进行绑定的值,而进行控制展开与否:

element-ui中el-table点击其他自定义按钮展开table中某一行

element-ui中el-table点击其他自定义按钮展开table中某一行在日常开发中,我们遇见了会有点击某些按钮,使得表格行展开的需求,这时候去查看文档element-ui(table)这里官方提供了示例为在行最左侧有一个展开合并icon,但是点其他地方不能展开,我们又想点其他地方而展开我们看见是在table-column上定了type为expand,而该列里面的自定义模板便是展开后显示的内容我们想要实现点击自定义功能,继续查阅文档:这里的expand-row-keys文档解释说可以设置当前已展开的行,那么我们可以给table绑定这个属性,在点击方法里面进行绑定的值,而进行控制展开与否:

【vue 项目】el-upload 上传文件以及回显照片和下载文件

本次需求是上传多种固定格式的文件,且回显的时候,图片可以正常显示,文件可以进行下载主要采用element的el-upload组件实现1、文件上传先看下,上传文件效果图点击上传将文件放到网页,还有一个点击确定的按钮再上传文件到服务器htmlel-uploadref="upload"accept=".png,.jpg,.jpeg,.doc,.docx,.txt,.xls,.xlsx"action="#"multiple:limit="5":headers="headers":auto-upload="false":file-list="fileList":on-change="handleChan

【vue 项目】el-upload 上传文件以及回显照片和下载文件

本次需求是上传多种固定格式的文件,且回显的时候,图片可以正常显示,文件可以进行下载主要采用element的el-upload组件实现1、文件上传先看下,上传文件效果图点击上传将文件放到网页,还有一个点击确定的按钮再上传文件到服务器htmlel-uploadref="upload"accept=".png,.jpg,.jpeg,.doc,.docx,.txt,.xls,.xlsx"action="#"multiple:limit="5":headers="headers":auto-upload="false":file-list="fileList":on-change="handleChan