elemnetui的el-form-item的表单项label和表单项内容原本是默认在同一行显示的，将el-form-item中表单项label和表单项内容换行怎么实现呢？效果如下：法1：elemnetUI官方的方法label-position=“top”法2：思路：将el-form或者el-form-item中的label-width属性去掉或者设置为0，如果label长度超出一行需要设置以下样式属性：加上如下样式代码：stylescoped>/deep/.el-form-item__label{text-align:left;float:none;word-break:break-word
在使用element的el-popover组件时，会发现自己对el-popover写的样式不起作用，甚至连使用::v-deep‘>>>’/deep/行内Style这四种样式穿透都不起作用，这是因为el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style首先给它添加一个特定的类名,千万别重复,语义命名以免样式污染popper-class="down-popover"然后在当前文件样式中不加scoped写一份stylelang="scss">.down-popover{padding:0;}/style>
项目开发中，有需要用到日历的组件，而且需要把某些日期标注起来，在这边标注的小红点我用了el-badge具体效果如下图所示： 页面标签：{{data.day.split('-').slice(2).join('-')}}变量声明：//日历calendarValue1:newDate(),activeday:[//日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5{dat:'2023-03-21'},{dat:'2023-03-15'},{dat:'2023-03-05'}],样式修改：/*日历样式修改*/.data-analysis/deep
在elementui中el-cascader多选：每个层级都可以选择，但并不是我需要的，我需要多选只能选最后一级，在网上找了很久都复杂的，最终自己选择用css样式对checkbox进行隐藏。实现方法：在css中加入.el-cascader-panelli[aria-haspopup].el-checkbox{display:none;}关键点在于利用属性选择器，遇到属性是aria-haspopup（表示点击的时候是否会出现菜单或是浮动元素）则设置checkbox不展示则会达到一下效果
如果是按叉叉关闭或者点表单以外空白处关闭的话可以给el-dialog添加 :before-close="closeForm"在methods里添加函数closeForm(){this.$refs.form.resetFields();//清除数据this.dialogFormVisible=false;//关闭对话框}如果是按取消按钮清除数据，也可以给取消按钮绑定点击事件，点击取消则调用closeForm函数。注意：要为每个form-item加上prop属性，要不然无法清空resetFields()方法是重置表单，重置为初始值，而不是设置为空值
el-upload本地上传图片，点击表单提交和一起上传项目需求：表单中有一项上传照片，上传时先存在本地（即先不提交）需求效果如下图：解决代码因为后端要求图片需要和其他参数一起提交，使用formdata对象携带参数，通过设置el-upload中action参数值为#，以及auto-upload（是否在选取文件后立即进行上传）为falseel-upload action="#" :show-file-list="false" :auto-upload="false":multiple="false":on-change="uploadFile"dragaccept="image/jpg,image
在element-ui中input可以使用prefix-icon=“el-icon-user”在前面添加icon图标，但是select自己没有该属性。那么如何在element-ui控件el-select前面前面icon图标代码如下（示例）：el-selectclearablestyle="width:560px"v-model="userModel.industryClassifyGid"placeholder="所属行业">template#prefix>spanstyle="padding-left:5px;">iclass="el-icon-suitcase">/i>/span>/tem
el-table单元格合并el-table单元格合并的关键是el-table的span-method属性，本文将讲解一下我在单元格合并的思路，本人前端小白，可能有理解错误仅供参考，本文重点介绍思路，毕竟每个人需求不一样注意：有时候不需要单元格合并，可以使用插槽前提单元格的合并必须得有数据，所以应该先准备好合并前的数据，在有数据的基础上做减法合并前–每一行的数据都是双份的这样虽然数据变多了，但是给了我们操作其他列的空间合并后其中一行被合并就看不见了分析需要合并三个部分表头合并在el-table中嵌套使用el-table-column即可实现多级表头、列的数据放在最底层el-table-colum
🍊作者：计算机编程-吉哥🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。🍊心愿：点赞👍收藏⭐评论 📝🍅 文末获取源码联系🏆先展示效果： 🏆使用的是下面这个插件噢~v-viewer插件🏆安装部署（重要）：1.安装依赖，在项目文件里进行安装安装命令：npminstallv-viewer--save 2.在main.js中写如下：importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css';Vue.use(Viewer); 3.在vue页面用标签包裹着i
修改el-tooltip的背景颜色注意：以下修改都需要在全局样式修改，因为这个组件的层级，并不是在你使用他的地方，而是和你的app同一层级，所以在当前使用的地方找不到tip提示的dom节点。修改提示框中长方形框的背景颜色.el-tooltip__popper{background:rgba(0,0,0,0.65)!important;}修改提示框中的小三角的边框颜色//注意[^=top]是下三角即提示框在上方若提示框在下方则[^=bottom].el-tooltip__popper[x-placement^=top].popper__arrow:after{border-top-color:#
