honeymoon_的博客

在动态渲染的element表格中，表头和表中数据是一个含有html的字符串，需要渲染。

uniapp+uview重置表单不生效问题

u--form表单校验--自定义校验不生效问题

1. 若这个参数是个字符串，里面含有特殊字符如： '我是一个字符&串' ,此时需要进行编码解码处理1. 传参时编码/pages/page1?string=" + encodeURIComponent(String);2. 获取参数时解码//string：先获取路由参数stringlet value = decodeURIComponent(string);2. 参数为对象，且里面含有特殊字符1. 传参时先将对象转换为字符串之后再编码/pages/page1?object=" +

//css中使用伪类first-letter:first-letter { color: red;}

问题1. 改变hover背景颜色如下图表，已经改好背景颜色当鼠标悬浮在表中时（hover）时，颜色未变，如下图：因此，解决如下：.el-table tbody tr:hover>td { background: #171F34 !important;}2. 如果表中添加了fixed如上修改后，fixed部分还是不行。解决：.el-table__body .el-table__row.hover-row td{ background-color: #171F34 !i

问题描述element ui自定义上传文件报如下错误：代码<el-upload action="#" :multiple="false" :show-file-list="true" :before-upload="beforeUpload" :on-remove="onRemove" :on-error="handleError" :file-list="fileList" :on-change=

eventBus的$on必须在$emit之前执行。否则会出现监听不到数据的现象。有一些网友说，在$emit外加$nextTick或者setTimeout，有些场景这个解决方案是没有作用的。所以，为了避免bug，eventBus慎用。 先传父组件，由父组件给兄弟组件，也很香。...

文档没写，但却真实支持<el-scrollbar> </el-scrollbar>

（一）问题描述用element 的输入建议框，实现模糊搜索，在点击清空按钮clearable之后，如果输入框已经是聚焦状态，再次输入时建议框不显示。el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。element官网链接：https://element.eleme.cn/#/zh-CN/component/input（二）解决给el-autocomplete添加一个ref

（一）使用背景列表内容特别特别多，列表特别特币长，dom渲染必定使页面卡死。使用vue-virtual-scroll-list，即列表的虚拟滚动。在可视区域渲染少部分列表内容，减少了创建dom节点和重新渲染组件的时间。（二）实现步骤1. 安装npm install vue-virtual-scroll-list --save2. 引入 + 注册组件import virtualList from 'vue-virtual-scroll-list'; //引入components: {

1. 封装好的分页组件//页码<template> <!-- 页码 --> <div class="page"> <el-pagination background :current-page="pageNum" :page-size="pageSize" :total="pageTotal" layout="prev, pager, next" @current-chan

目录（一）问题描述（二）实现步骤1. `el-table` 中添加 `@filter-change="handleFilterChange"`2. `el-table-column`中添加`column-key="给这一列取一个唯一标识"`3. 筛选（一）问题描述element官网例子，表格筛选如下图。官网链接：https://element.eleme.cn/#/zh-CN/component/table如果你的表格分页了，那么这个筛选只能筛选当页的数据，原因是我门从接口得到的数据只有当页的。此

问题描述element表格中的数据有两种形式：数值、字符串。element自带排序方法会发生排序错乱。如图：没有金额时，展示 --，图中升序排序错乱。解决步骤1. 在el-tabel中添加 @sort-change="handleSort"<el-table :data="tableData" class="my-table" @sort-change="handleSort"></el-table>2. methods中添加方法方法中de

方法一（可带小数）// 为数字添加千分符export function addThousandSplit(num) { num = num + ''; let integer = num.split('.')[0]; let surplus = num.split('.')[1]; const arr = integer.split(''); const val = arr.reduceRight((acc, cur, index) => { if ((arr.leng

handleSave() { let list = []; list.push( this.checkForm("oneRef"), this.checkForm("twoRef"), this.checkForm("threeRef"), this.checkForm("fourRef"), this.checkForm("fiveRef"), this.checkForm("sixRef"), ); Promise.all(list)

//html<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassName" @cell-click="handleClickCell"></table>//script先利用单元格的className方法，给行列索引赋值cellClassName({row, column, rowIndex, columnIndex}){ row.

这里写目录标题前言问题1. new Date(value)前言在这里记录自己遇到的Safari兼容性问题。问题1. new Date(value)safari不支持2021-01-01，而是支持2021/01/01。IE同理。谷歌两种都支持。因此在使用new Date()时，要先进行时间格式的转换：例如：将2021-01-01格式的时间转换为2021/01/01格式。let newDate = myDate.split('-').join('/');…待补充...

1. 单行文本超出overflow: hidden; white-space: nowrap; //文本不换行text-overflow:ellipsis; //超出文本部分用省略号表示2. 多行文本超出text-overflow: ellipsis; // 超出的文本用=省略号表示display: -webkit-box; //将对象作为弹性伸缩盒子模型显示-webkit-line-clamp: 8; // 在第几行显示省略号-webki

前言本篇文章记录导出Excel功能。从后端接收文件流，将其转换成下载地址并下载。若想参考纯前端导出文档功能，请点击文章链接：https://blog.csdn.net/honeymoon_/article/details/119818396实现//接口，用不了封装好的方法，需重写，因为要修改responseTypeexport function exportExcel(params) { return axios({ method: 'post', url: TEST_EXP

1.效果2. 代码<el-table :data="accountData" > <template v-for="item in accountHead"> <el-table-column v-if="item.id === 'object'" :key="item.id" :prop="item.id" :label="item.name" > <templ

项目场景：element UI 利用指令loading制作局部loading。问题描述：需要制作局部loading的页面很长，loading 时可以向下滚动，导致遮罩层遮挡不了页面的下半部分。 解决方案：在loading时利用overflow: hidden;禁止页面滚动。loading属性为true即页面正在加载中时，给页面绑定banScroll样式。html：<template> <div class="earn" :class="{

问题描述：在子组件中的mounted()打印从父组件接收到的参数，结果为空？原因：可能的原因就是：这个参数在父组件中是通过接口获取到的，也就是说，子组件mounted的时候父组件的这个参数还没获取到，流进子组件的参数值就是空。解决：子组件中利用watch监听一下这个参数就行了。...

1. 问题后端返回了一个字符串，我们把字符串展示到页面上的时候如何保留字符串的格式呢？2. 解决： 利用<pre> 标签<pre>{{字符串}}</pre>3. pre标签<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。pre元素是块级元素，但是只能包含文本或行内元素。也就是说，

记录一下自己常用方法：param.toString().trim().length === 0

步骤1.下载xslxnpm install xlsx --save2.导入xslximport XLSX from 'xlsx'3.template中给个点击事件<button @click="exportData">导出</button>4.methods中定义函数实现导出exportData() { //定义一个数组，存放表头数据 let head = []; //最后要导出的数组 let tableData = []; //head格式

目录前言1.问题场景2.问题描述3. 解决方法其他1.筛选功能2.其他问题前言想要了解动态生成表格请点击下方链接：https://blog.csdn.net/honeymoon_/article/details/1195441541.问题场景表格是动态生成的（表头不是一个一个<el-table-column></el-table-column>写出来的，而是循环表头列表tableHead动态生成的），所以想要给其中某两个列，如：direction列和status列添加筛选功

beforeUpdate(){ this.$nextTick(() => { this.$refs.myTable.doLayout(); })},在element UI里面有一个doLayout()函数;如图：在你要添加的列的数据加载完事之后，用doLayout()进行重新布局即可。其中：myTable是表格的ref属性的值...

1.前言（介绍相关原理）1.创建 Date 对象Date 对象由新的 Date() 构造函数创建。有 4 种方法创建新的日期对象：(1) new Date()当前日期(2) new Date(year, month, day, hours, minutes, seconds, milliseconds)指定日期和时间。如：new Date(2018, 11, 24, 10, 33, 30, 0)，7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）new Date(2018, 11,

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。1. template<el-table :data="tableData"> <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.name" ></el-t

111

1. 首先是模板<template> <div class="import-list"> <el-button class="import-button" @click="uploadFiles"> <i class="icon"></i> 导入公司{{title}} </el-button> <el-dialog class="dialog-box"

需求场景：子组件中存在表单button按钮存在于父组件中点击父组件的button验证子组件的表单此时，子组件的表单无法使用$emit，那么，父组件如何获取子组件表单中的数据呢？父组件如何验证子组件的表单呢？解决：在父组件中引入的子组件添加ref属性 <RiskForm ref="riskForm" />子组件的表单也具有ref属性<el-form class="risk-form" :rules="rules" ref="riskFormRef"

设置 Scoped slot 来自定义表头代码如下<el-table :data="mockTableData" style="width: 100%"> <el-table-column prop="title" label="名字"></el-table-column> <el-table-column prop="status"> <template slot="header">类型 <i clas

<el-date-picker v-model="data" type="daterange" range-separator="——" format='yyyy-MM-dd' value-format='yyyy-MM-dd' start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOpt

//深拷贝export function deepCopy(param) { if (!Array.isArray(param) && !isObject(param)) { return param; } else if (Array.isArray(param)) { return param.map(item => deepCopy(param)); } else if (isObject(param)) { let result = {};

相当于一个字的空格密ㅤ码

element UI官网链接：表格部分<el-table :data="tableData" @cell-click="cellHandleclick" //当某个单元格被点击时会触发该事件 @row-click="rowHandleclick">methods: { cellHandleclick(row, column, cell, event) { console.log(row); console.log(column); console.

问题描述启动程序时报错：When `proxy` in package.json is an object, each `context` object must have a `target` property specified as a url string解决这是因为vue.config.js中一个服务都没开。开一个就好了

问题描述：直接用setInterval调接口，会导致一直不间断的调用，不管上次调用是否请求成功，有可能会导致程序报错。经过一个贵人讲解之后受益匪浅，记录一下。如何解决这个问题？用setTimeOut模拟setInterval//handleKLineSuccess表示当折线图初始化完成handleKLineSuccess() { //getFirstRealtime()调接口方法 this.getFirstRealtime().then(() => {