改动点 v-model= 绑定的必须是个数组，在data中定义好， 回显的时候，后台传递数组有值就能显示多个选中的。data(){return{roleTypeDic:[{roleId:'01',roleName:'经理'},{roleId:'02',roleName:'销售'}],//这边可以动态后台查询form:{orgRoles:[],//这个里面是roleId数组，后台获取到list后页面会直接显示},};},后台//后台list有值页面就会显示已选中的ListorgRoles=ArrayList();orgRoles.add("01");orgRoles.add("02");遇到问题

1、牢牢记住，vue是基于JavaScriptES6的，所以只要刷新页面里面data下的数据，页面会自动刷新的。所以这个数据是父页面传给el-dialog的，要刷新父页面的数据，el-dialog页面内的组件就可以刷新了。2、在页面的组件处理后台程序完成后，可以调用that.$parent.$parent.【父页面的方法】来刷新数据。例如：monitorDataService.saveFileToMonitor({updateFile:that.updateFile,monitorId:that.form.monitorId}).then(response=>{//完成后刷新if(respon

在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。......删除首先，在data(){}中定义一个maps:newMap();data(){return(){maps:newMap(),dataList:[]}}然后，当数据进行懒加载时把点击的节点数据存储在map中，点击删除时再从map中获取节点数据，进行数据刷新操作。methods:{//懒加载load(tree,treeNode,res

背景：在选择所属部门（部门可新建，则部门会很多）时，如果部门特别多的情况下，在下拉选择时，el-popover弹出框会变得很长很长，页面不美观。 产品要求：在超长时，固定高度，支持滚动条。在代码里修改样式时，一直不生效，仔细查看dom才发现，popover的dom创建在了最外层，也就是和根组件app同级，所以在任何的下写的css均不能生效。如果直接在下粗暴修改，肯定会影响到其他组件的样式，不可以这样修改。查阅官方文档发现，可以为popover组件添加类名，这样就不会影响其他样式了。 代码如下： 效果如下：还可以对滚动条的样式进行修改，比如隐藏滚动条或者改变滚动条的粗细等代码：.el-popov

由于element-ui把input进行了封装，input外面是多一层div的。在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。所以对于el-input，使用@keyup.enter是无效的，需要加上.native限制符.native修饰符的作用：当想要在一个组件的根元素上直接监听一个原生事件，这时，就可以使用v-on的.native修饰符。el-inputv-model="serverTimer"@blur="addTimer"@keyup.enter.native="addTimer"placeholder=

前言数据可视化是现代软件开发中必不可少的一环。而在开发中，el-table作为一款常用的表格组件，其通过formatter方法可以轻松实现数据格式化。本文将为大家详细介绍el-table的formatter方法的使用技巧。常规写法：el-table:data="tableData"border>el-table-columnprop="type"label="种类">templateslot-scope="scope">spanv-if="scope.row.type=='1'">类型1/span>spanv-if="scope.row.type=='2'">类型2/span>spanv-if

ementuiTable二次封装在做项目的时候特别是后台管理的时候table难免用的多，所有根据vue框架对table进行二次封装好处那就是可以省很多代码，而且用起来也方便。非常的奈斯封装的内容divclass="hs-table">el-table:class="comFooterShow?'singleTable':'notFooterTable'"ref="singleTable":highlight-current-row="selectCurRow"@current-change="handleCurChange":data="dataProcessing()"stripe:max-

学习目标：使用ElemenetUI框架中的 el-tabs组件学习内容：平时在做项目时，tab切换效果几乎是必不可少的，下来整理一个最近做的一个小功能：el-tabs效果图：  html：会员购推广优惠券说明：v-model：当前选中项:tab-position：tab栏显示方向@tab-click：切换tab栏的事件JS：data(){return{activeNames:['1'],activeName:'coupon',tabPosition:'left'}},methods:{changeTab(tab){console.log('触发tab',tab.name)}}

        这次写的项目是写后台管理系统这部分，对于后台管理使用vue写，用组件的话，table组件用得次数比较多，可以封装一个table组件。        1.如封装的table组件：{{item2.name}}{{scope.row[item.prop]}}exportdefault{name:"UserTableCenter",props:{tableData:{type:Array,default:()=>[],},tableLabel:{type:Array,default:()=>{return[];},},},}; :prop="item.prop"  :label="it

一、ElementUIContainer布局容器布满全屏：1、需要给包裹的div一个height：100%2、给#app,html,body,.el-container一个height：100%3、给el-container设置direction="vertical"，因为包含main和footer二、头部和侧边栏固定el-main可滚动HeaderAsideMain给内容区域的container加样式** height:calc(100vh-头部的高度);