宽度el-popover popover el
el-upload批量上传，获取第一个数据返回参数并在后面的上传中进行传递；递归
fileChange(file, fileList) { const { raw } = file; if (file.status != 'ready') return; if (file.size / 1024 / 1024 > 100) { this.$message.error('文件大小不 ......
SXSSFWorkbook 自适应宽度
XSSFWorkbook wb = new XSSFWorkbook(new File(...)); swb = new SXSSFWorkbook(wb, 100); SXSSFSheet sheet = swb.getSheetAt(0); sheet.trackAllColumnsForAut ......
巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）
问题描述 有一个简单的表格，产品要求实现双击可编辑 看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态。大致代码如下： <el-tabl ......
elementUI 的el-dialog作为子组件，父组件如何控制其关闭的按钮
这里有三点需要说明： 1. 使用：before-close="closeHandle" 将其 $emit() 出去 2. 取消按钮 也需要$emeit出去 3. 控制对话框显示隐藏的变量需要props给父组件来传值，这个相当重要，不然控制不了对话框的显示隐藏 4.1,2步骤是为了在子组件不再重复操作 ......
el-select自定义指令用于触底加载分页请求options数据（附上完整代码和接口可直接用）
问题描述 某些情况下，下拉框需要做触底加载，发请求，获取option的数据 为了方便复用，笔者封装了一个自定义指令 另外也提供了一个简单的接口，用于演示 我们先看看效果图 效果图 思路分析 注意事项一 el-select要不嵌入到body中 为何，不嵌入到body标签中呢？ 答曰，更加方便自定义指令 ......
element-ui中的el-table底部固定指定行
1，固定一行合计的情况 https://element.eleme.cn/#/zh-CN/component/table 直接使用官方文档上的summary-method 2，固定指定行或者多行 使用样式去固定 例子：(计算列表数据的平均值，最大值，最小值并固定底部) 1，计算数据的值 protec ......
el-upload组件报TypeError: Cannot create property ‘uid‘ on string错误解决方法
今天发现使用el-upload上传文件,上传没有问题,点详情看文件时就会报一个错误,错误如下:TypeError: Cannot create property ‘uid’ on string ‘https://xxxx.com/upload/20230506/1683346602758.png’ ......
图片上传 el-upload 单个图片写法
上传单个图片： template： <el-form-item label="上传图片" prop="result"> <el-upload v-if="!formList.result" class="upload-demo" action='/api/jsonws/dlapp/add-file- ......
js实现el-select选中的文本，一键复制
<div class="invite-buttom"> 请选择要复制的网站： <el-select v-model="webValue" placeholder="请选择要复制的网站"> <el-option v-for="item in formUrl.webInviteUrl" :key="it ......
2023/12/19 el-input设置为只读
今天学习了element ui将文本框设置为只读 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" :re ......
[popover, select] el-popover内有select的时候在选择后会自动关闭
Steps to reproduce选择某个选项后会自动关闭 What is Expected?选择后不自动关闭，等点击按钮后再去触发组件内的关闭方法。 What is actually happening?自动关闭 Additional comments这个问题当初在elementui的时候还没有 ......
elementui中附件上传功能 el-upload 踩坑 问题分析以及解决
1、Current request is not a multipart request 很离谱这个错误，这个错误原因是我的data写成date： 2、Required request part ‘file‘ is not present： 首先要知道这个错误是来自后台，通常是@RequestPar ......
解决element-ui中el-tree懒加载load只执行一次问题
在我们实际开发中，由于后端返回的节点数据量庞大，而用户往往没有要看到所有数据的需求，如果在页面加载中，将页面的所有节点数据都加载出来，无疑是浪费用户宝贵的时间，因此，就有了节点的懒加载的需求，用户想展开哪个节点，我们就给他展示什么数据（异步的从后台发送请求获取当前节点数据然后进行渲染）。 问题描述： ......
element ui el-select下拉多选添加全选功能
// html <div class="item" > <span class="label">观测要素</span> <span> <!-- 要素组批量处理-多选 --> <el-select v-model="eleTypeList" multiple @change="eleTypeChang ......
vue2 中 el-table 实现树形列表，支持增删改等操作
需求场景：el-table构造一个树形列表，支持新增节点，删除，修改等操作。 实现效果 思路 一般的el-table 增删改，我们都很熟悉；关键在于实现一个纯前端的树形列表，最终再调接口存列表数据。 树形el-table，需要设置 row-key，一般为 id，所以每新增一条数据，都必须有id。需要 ......
el-date-picker 限制时间范围 picker-options 传参
需求 el-date-picker 限制时间范围的选取，不能超过某个区间 [startDate, endDate]。 问题在于，disabledDate 函数的参数默认是 time，无法传递自定义参数 [startDate, endDate]。 分析 传递给 picker-options 的值只能是 ......
[Vue]el-radio想要传入全部类型时，label绑定空字符串
记录一下，原本以为不可以这样绑的。这样就可以空查了。 <el-form-item label="类型" prop="type"> <el-radio label="" v-model='query.type' @change="handleQuery">全部</el-radio> <el-radio ......
el-descriptions 描述列表 label 背景色失效问题
<el-descriptions title="自定义样式列表" :column="3" border> <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">koo ......
el-table
el-table-column 渲染的顺序不对，第一列被渲染到最后 el-table-column 必须作为 el-table 或 el-table-column 的直接子元素使用，如果不是将会导致标题所示错误 原因如下： ......
antD——popover气泡卡片宽度过窄，鼠标移入时第一次位置不正确
参考：https://www.jianshu.com/p/6f96f26f4a6c/ 原效果： 修改后效果： 原因： 初次渲染的时候组件未能正确的估计到图片的大小，所以会默认按照文字显示，导致气泡出现在偏移的位置。 解决方法： 在组件初次加载的时候就给它指定好宽高即可解决问题。 <Popover p ......
php css 改变宽度,img标签设置display:block属性时宽度无法设定为100%的解决办法
本篇文章所说的内容是img标签设置display:block属性时宽度无法设定为100%的解决办法，方法很详细，有一定的参考价值，有需要的朋友可以参考一下，希望可以对你有所帮助。 现象 如下代码，img标签设置了display：block，尺寸宽度无法设定为100% img标签设置display:b ......
【misc】txt零宽度隐写
零字符宽度隐写1.1 前置知识1.1.1 统一码（Unicode）统一码（Unicode），也叫万国码或单一码，是计算机科学领域中的一项业界标准，包括字符集、编码方案等。Unicode 是一种重要的交互和显示的通用字符编码标准，它覆盖了美国、欧洲、中东、非洲、印度、亚洲和太平洋的语言，以及古文和专业 ......
el-collapse 组件回车键会触发显隐,如何去掉回车出发显隐
el-collapse 组件回车键会触发显隐(第一次手动触发后) 因为change方法原因 可以把事件放到title插槽上面 <template> <div class="coordination-communication"> <el-collapse v-model="activeNames" ......
element plus el-table表格合并
el-table表格合并实现都是使用表格的span-method属性绑定操作函数 <el-table :data="table.data" :span-method="objectSpanMethod" > </el-table> 操作函数格式 const objectSpanMethod = ({ ......
修改 el-input 内部样式
在工作中有时候需要单独设置某个 el-input 组件的内部样式，比如 字体颜色、背景色、宽度、高度等，这时就需要修改 el-input 组件的内部自带样式，修改方式如下： 修改前： el-input 独占满一整行 修改后： 模板代码 <div class="elinput"> <el-input ......
el-table-column width="180" 宽度自动成比例缩放缩小 表头宽度不对 原因
首先el-table-column width="180"的设置原理是 如下面加粗部分 <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1638px;"> <colgro ......
Vue使用el-cascader实现地区选择器组件
1. 使用组件-效果展示（推荐） 1.2 安装组件依赖（默认是V6版本，旧版本V5.02） 官方文档地址（二级联动，三级联动包含教程）：https://www.npmjs.com/package/element-china-area-data npm install element-china-ar ......
el-table 新增、编辑和删除
新增 就是给新增按钮加一个事件，事件包括弹窗的打开（给 el-dialog 的 v-model 值赋为 true）、需要传递给弹窗组件的数据信息等（因为是新增，就传想要新增编写的信息的初始化即可） 关于弹窗的详细编码介绍请参考文章：" vue 弹窗组件 " 编辑、删除 新增按钮随便在哪个地方都可，但 ......
el-table去掉鼠标悬停的效果，隐藏表头
1、去掉悬停效果 添加样式 /* 去掉鼠标悬浮效果 */ .el-table tbody tr:hover > td { background-color: transparent !important } 2、隐藏表头 el-table 添加属性 :show-header :show-header ......