xjh01的博客

官网的说明里没有讲清楚以上图中框出的两个属性进行说明，只需要返回style字符串就可以<el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle"></el-table>然后再script里headerCellStyle({ row, rowIndex }) { return 'background-color: #F2F6FF;text-align: center;' },cell

使用el-select组件时，如果不加特别配置，选项里的对象都是蓝色，为选中状态。这时，需要在<el-select>里添加 value=key="id"项 ，然后在option里面的key = id，这样就可以正常传递对象值了如下图：<el-select v-model="selected_item" value-key="id" style="width: 150px;" clearable filterable :loading="loading" > <el-o

原因是用了el-tab组件导致的，解决方法：var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度myChart.style.width=window.innerWidth+'px';chartObj=echarts.init(myChart); //初始化图表chartObj.setOption(option); //给图表配置设置...

在默认设置里，采用的是英文。将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en改成import locale from 'element-ui/lib/locale/lang/zh-CN'就可以了

【原文链接】 elementUI实现分页前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据前端分页tableData.slice((currentPage-1)*PageSize,curren

在写项目时，获取了数据后想要代码比较简洁，但在各种循环时出现了很多问题。由于获取的数据格式，跟最后需要提交的数据格式不一致，所以一开始打算分为两个数据，一个是负责显示的数据A，另一个是负责绑定的数据B。A负责页面的渲染，B负责最终的提交。这个过程里面，常出现的两个问题，一个是length undefined如下图这个提示的原因一般是数据格式不是数组，所以获取不到length属性另一个是跟上面长得很像 property 'xxx' of undefined，这个是因为对象里没有'xxx'这个属性所

转载于“手摸手，带你用vue撸后台 系列三(实战篇)” 链接通过dialog来编辑，新建，删除table的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。首先我们要明确一个点 vue 是一个MVVM框架，我们传统写代码是命令式编程，拿到table这个dom之后就是命令式对dom增删改。而我们现在用声明式编程，只用关注data的变化就好了，所以我们这里的增删改都是基于list这个数组来的。这里我们还要明确一点vue 列表渲染注意事项由于 JavaScript 的限制， Vue 不能检测

在使用el-image组件加载本地图片（src/assets/logo/logo.png）时，总是提示Failed，图片显示不出来。搜索后得知，要在路径前使用require加载所以将引用路径改为下面截图后，就可以正常显示了注意：引用过程中单双引号的配对...

其他都没什么问题，这里主要是记录一下，如何使用。1、设一个totalpages，发送一次不带参数的get请求，获取数据所有条目数，并将其与Pagination里的total绑定；2、设置size-page和current-page时，将参数分别传给_limit和_page，之后发起get请求，就能获得请求的当前页数据；3、因为第一步骤，所以显示的页数会一直是总数的数量，就能正常使用了。...

在做一个点击编辑数据栏，然后弹出Dialog框，显示两个input，在其中placeholder是之前的值想到用ref引用元素赋值，但总是提示ref元素undefined。搜索过后得以解决用$nextTick，这个的功能就是等所有的DOM元素节点都渲染完成以后才执行其里面的方法，不然获取不到Dialog里面元素的ref值如上图，就能解决Dialog里面引用ref的问题...

使用了一个Element UI中tree控件，tree里用icon元素增加了新增、编辑、删除功能，但在第一次新增还没有完成输入前，又可以继续点击其他的新增，这样的用户体验一点也不好。使用获取元素，再用 元素.onclick = " "，这样并不起作用。因为icon是以伪元素的形式存在的，这样是无法获取事件的。研究了一下发现，元素本身：pointer-events: none;禁用点击事件...

按照官方文档直接复制过来，发现head和aside、main、foot在同一行问题排查查了下官网的文档，发现这样一项说明分析原因是：将head、aside、main、foot封装成了独立组件，封装成组件后，el-container中没有了el-footer和el-header，导致子元素排列方向默认为horizontal问题解决在el-container上增加 direction="v...

在表格里最后一列加入了“操作”列，打算在其中添加一个“详情”，单击后，弹出一个框来显示内容详细信息。但不论是Dialog，还是Tooltip都出现一个问题，弹出来黑色的一片，却没有内容，如下图：搜索后，找到两个办法来解决：方法一：取消 el-table-column中的 fixed=“right”方法二：在Dialog中加入属性 :append-to-body =“true”在ap...

在做会员消费功能时，用了判断操作。在“取消操作”时用了this.message({ message: '操作取消', type: 'warning'})但测试的结果，弹出了消息窗口，但里面的内容为空。搜索过后，发现网上的解决办法，并不是针对我的情况。我用的是全局引用Element UI，不是单功能引用。将代码再次重新输入一遍后，发现问题解决了。可能是一个bug，记录下来。...