小太阳的博客

实现合并行思路：需要一个数据来记录需要合并的行数据（数字几就代表合并几行，比如 [1, 2, 0, 1]就是第一行第四行不变，第二三行合并成一行），还要有一个变量来记录数组下标。

ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）

elementUi时间选择器限制结束时间大于开始时间并且不能选过去时间。

elemntUI限制时间选择器不能跨月并且不大于未来时间

需求如下：点击定制航线，从本地选择文件点击打开后直接调取接口主要代码如下： <el-upload v-if="item.uploadFlag" // 是否显示上传组件 ref="xlsUpload" :style="{ display: 'inline-block' }" :auto-upload="false" // 不自动上传 :on-change="fileOnChange" // 文件状态改变时的钩子 :before

如图所以：点击航线名字需要切换输入框，输入框需要自动聚焦，这样即使啥也不修改也能执行失焦事件。elementUI文档上有一个autofocus属性，把autofocus设置成true发现并没有自动获取焦点。失效的原因：autofocus是vue中input的原生属性,element也支持这种方法,但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。解决办法：自定义指令在全局定义一个自动获取焦点的自定义指令，在所有组件中都可以使用v-focus来自动获取焦点。代.

需求如图所示：由于图片较大，一次全把数据请求回来难免会太慢，就需要滚动加载请求数据。实现：element组件：InfiniteScroll 无限滚动主要代码如下：<template> <div class="route-wrapper"> <ul v-infinite-scroll="infiniteScroll" // 在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执

如下图所示：限制日期选择器只能上下浮动一个月并且要小于今天代码如下： <el-date-picker v-model="searchForm.creatTime" :picker-options="pickerOptions" class="setDatePicker" type="daterange" range-separator="至" start-placeholder="开始时间"

场景：如图：坐标中的经度和纬度都要控制必填思路：prop只绑定第一个输入框的值，rules中也只写第一个必选的验证，但是要写了一个validator验证这两个值必填，代码如下： <el-form ... :rules="editFormRules"> <el-form-item class="jt form-btn" label="坐标：" prop="lon">

先说一下我的场景：就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可

在开发中我们发现修改elementUI样式的时候，添加了scoped的组件修改样式是无效的。首先我们要了解一下scoped是什么？官网是这样说的：当< style >标签有scoped属性时，他的css只作用于当前组件的元素。使用scoped后，父组件的样式不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scopedCSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。由于element的样式是全局引入的，所

直接设置width：'xx%'是无效的，所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。代码如下： <el-table-column prop="projectName" min-width="24%" //设置百分比 label="项目点位名称"/> <el-t...

我使用的是主题编辑器 Chrome 插件，在任何使用 Element 开发的网站上配置并实时预览主题安装完这个扩展程序后，选择这一个扩展程序这里可以修改颜色可以发现，蓝色已经变了然后点击下载解压下载的文件后，把theme放入项目中的css文件存放处然后在main.js里面引入import '../static/css/theme/index.css'; /* icofont */就可以观察到颜色的变化了...

场景：需要校验手机号是唯一的，如下图代码如下 <el-form-item label="联系电话:" prop="mobile"> // prop需要校验的字段 <el-input v-model="editForm.mobile" auto-complete="off"/> </el-form-item> data() { // 手机号唯一性验证 let validateA

在element中的dialog组件中，dialog是不可拖拽的，解决方案如下：1.在 utils 中新建 dialog.js 文件import Vue from 'vue';// v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); c

待补充 搜索imgOnChange看代码

需求：选一个开始时间，要求精确到小时，小于当前时刻的小时不让选择，只能往后选7天。如图：需要element的DateTimePicker 日期时间选择器部分代码如下： <el-form-item label="出发时间:" prop="startTime"> <el-date-picker v-model="editForm.startTime" :picker-options="pickerOptions"// 控制时间选择

场景：选中左侧的船舶，点击确定后，右侧动态生成表头这个表头可以是后端给的数据，当然也可以是前端点击后自己配置数据。我用的是前端自己存储表头数据。部分代码如下： <el-table-column v-for="item in tableColumnList" :label="item.propName" :property="item.prop" :key="item.prop" align="center"> <tem

场景：只有子节点有复选框，父节点没有复选框，如图打开控制台，发现只有子节点样式名有isleaf所以修改样式代码 // 不可全选样式 .el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .el-checkbox .el-checkbox__inner { display: none; } }

场景：在表单中实现动态增减经纬度，参考element给我们提供了一个动态增减表单项的例子核心代码如下// template中的代码 <el-form-item v-for="(item, index) in editForm.lonLat" :label="'第' + Number(index+1)+ '组经纬度'" :key="index" ...

在表格中，有如下需求（后台给的数据为数字）前后端决定0代表正式服务，1代表试用服务，2代表未服务，这样后端给的状态是012，怎么把标识转换成文字填入表格呢？首先需要自己定义一组转换表 statusData: { '0': { label: '正式服务' }, '1': { label: '试用...

在vue项目中，使用element-ui抽屉组件的时候报了下面这个错误但是前面使用的表格，表单，输入框一切正常，当引入drawer的时候就报错了。应该是vue或者elementUI版本过低的问题。解决：找到了package.json文件，发现里面的element的版本过低。然后需要升级element-ui版本解决 ：npm 安装指定版本的element-ui比如：npm i eleme...

场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。需要用的是：element中的select选择...

表单中的prop（校验）element中的form提供了表单验证功能，只需要通过rules属性传入约定的验证规则，并将form-item中的prop属性设置成需校验的字段名即可。代码如下： <el-form ref="editForm" :model="editForm" :rules="editFormRule...

问题：在表格内每一行使用Popover弹出框，点击Popover组件内的确定按钮，Popover不关闭如图：解决方式：写一个按钮，模拟点击按钮1.在页面中组件外写一个按钮，按钮的样式为假隐藏状态 <el-button id="popo-btn" ref="popo" />#popo-btn{ width: 0; height: 0; border: none; padding: 0; margin: 0; }2.点击确定时，执行模拟点击