在项目中，会有对图片预览查看的需求。当使用el-dialog进行图片预览实现时，会出现长图片占满整个浏览器，致使图片不能完整的显示的情况,这对使用者的体验非常不友好，使用elementui提供的el-image-viewer就能解决这个问题。一，封装el-image-viewer组件        importElImageViewerfrom'element-ui/packages/image/src/image-viewer';exportdefault{components:{ElImageViewer,},data(){return{showViewer:false,//显示查看器sh

设置elementui的el-popover的样式需要自定义popper-class：自定义popper-class="tips-con"，如下：template>el-popoverwidth="300"trigger="hover"popper-class="tips-con"title="提示"placement="top-start">divclass="operate-btn"slot="reference">el-buttonsize="mini"type="primary">消息提示/el-button>/div>spanslot="default">这是一个详情/span>/e

需求描述：element-plus+el-table点击行选中并修改背景色+文字颜色代码实现：方法一：重点：highlight-current-row/*选中某行时的背景色*/.el-table__bodytr.current-row>td{color:#28A458;background:rgb(197,213,255)!important;}element-plus本身有给提供这个功能，而且比第二个方法更好用，第二个方法在有列固定的情况下，样式会不生效，所以建议直接用第一种方法二：重点：@row-click:row-styleconststate=reactive({ checkNumbe

有时候需要获取el-tree每个节点的点击状态，可以通过以下方式，其中isCheck类型为布尔值el-tree:data="organizationData":props="defaultProps":check-strictly="isAssociate"node-key="organizationId":expand-on-click-node="false"@check="getCurrentNode"ref="tree">el-tree>1.绑定@check事件，我这里是getCurrentNode，函数名自己随便写2.绑定refgetCurrentNode(nodeObj,nodeS

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言二、代码如下（示例）：总结前言当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁提示：以下是本篇文章代码，下面案例可供参考二、代码如下（示例）：el-tabsv-model="formData.type"@tab-click="onSubmit">el-tab-panelabel="前部"name="1">/el-tab-pane>el-tab-panelabel="后部"name="2">/el-tab-pane>el-tab-panelabel=

当table中表头太多了，然后不想一个一个写，可以用循环的方式写先上个图直接上代码el-table:data="tableData">divv-for="(col,ii)incols":key="ii">el-table-columnv-if="col.prop=='type'":prop="col.prop":label="col.label">templatescope="scope">el-tagtype="primary">{{scope.row.type==1?'是':'否'}}/el-tag>/template>/el-table-column>el-table-columnv-e

vue引入elementui中的el-table组件时，在el-table-column下使用作用域插槽，通过v-if条件来动态显示某些元素，发现有的条目渲染没生效或者混乱。如：查看修改原因：vue虚拟dom机制，会尽量复用已存在相同节点元素而不会重新渲染，导致使用v-if没有达到预期效果解决方法：使用div元素将slot插槽内容包裹起来，然后在div元素上加上:key="Math.random()"，这样使插槽内容重新渲染查看修改

一、前言众所周知，element-ui中有一个表格组件el-table，用于展示多条结构类似的数据。之前遇到过一个需求，要手动控制el-table的表头显示。就是假如table表格一共有10列数据，可以通过设置勾选，决定显示多少列。二、代码为了代码的复用性，将配置页面单独抽成了组件，所以代码中会有组件之间传值父组件（表格页面）template>divclass="testTable">divclass="settingIcon">iclass="el-icon-setting"@click="showSetting"/>/div>el-table:data="tableData"style="

1.在使用element-ui的折叠面板时，点击标题栏的按钮不展开面板内容：项目：{{i.name}}编辑删除通过设置@click.stop="showCollapse()"，阻止冒泡，点击按钮不再开展。2. 想要改变折叠面板中icon位置 找到折叠面板中icon位置，css设置如下：.ep-collapse-item__arrow{flex:10auto;order:-1;}样式如下

最近遇到一个这样一个需求，开始时间和结束时间只能选择当前周时间，而且结束时间不能比开始时间早；上效果图： 结构文件js代码exportdefault{data(){return{pickerOptions:{disabledDate(date){letdata=newDate();//当前日期letyear=Number(data.getFullYear());//当前年letnowMonth=Number(data.getMonth());letmonth=Number(data.getMonth())+1;//当前月letday=Number(data.getDate());//当天//计