element-ui
无人之岛08
这个作者很懒,什么都没留下…
展开
-
Element表格固定第一列和第一行,并通过属性名动态渲染数据
Element表格固定第一列和第一行,并通过属性名动态渲染数据渲染结果 滚动条可拉动,第一列为固定不动,nano为简称对应sentimentData里面的各个值。转载 2022-07-12 13:51:19 · 3082 阅读 · 0 评论 -
element-ui table中使用type=‘selection‘实现多选、禁用的问题总结
问题1. 在表格中使用type='selection'实现多选,但表头中用label无法添加全选字样解决方法:使用css伪类元素添加.el-table__header .has-gutter tr .el-table-column--selection .cell .el-checkbox:before(或after) {undefined content: "全选 ";}问题2: 在表格中使用type='selection'实现多选,需要禁用某一行解决方法:<el-t..转载 2021-12-01 14:53:51 · 6263 阅读 · 1 评论 -
在vue中,如何防止element-ui message重复弹框?
场景在使用element-ui框架的时候,我们会经常使用到Message组件。但是原生的有个bug,就是会形成消息队列,消息提示会越来越多!那么该如何解决呢?解决利用element-ui中message的close方法,在下一个弹框弹出前先把上一个弹框实例关闭掉resetMessage.jsimport { Message } from 'element-ui'; // 引入messagelet messageInstance = null;const re.转载 2021-09-22 17:04:35 · 1159 阅读 · 1 评论 -
基于elementUI的Vue 中 el-form 嵌套 el-table的写法
前端页面:前端vue代码:<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-table :data="ruleForm.evidenceTemplateList" stripe border style="width: 100%" size="mini"> <el-table-column type="index" label="序号" min-width="20"转载 2021-03-19 13:28:23 · 1840 阅读 · 0 评论 -
优雅的elementUI table 单元格可编辑实现方法
最近在做可编辑特定列的单元格的elementUI table,看了N多的开源、文章,找到一个很优雅的实现方式,分享给大家。PS:单元格可编辑的table,用英文搜索:Inline editable table with ElementUI 会得到高质量结果。先上效果:APP.vue:<template> <div id="app"> <div style="margin-bottom: 30px"> <el-switch转载 2020-12-05 17:03:25 · 854 阅读 · 0 评论 -
vue elementUI el-select 同时获取label 和 value 的值
<template><div><el-select v-model=“fruit” @change=“handleChange”><el-option v-for=“item in selectList” :key=“item.whsCode” :label=“item.fruitName” :value=“item.fruitEnName”></el-option></el-select></div></转载 2020-11-19 10:47:05 · 1959 阅读 · 0 评论 -
element-ui 的el-cascader多选在IE中样式不正常
注意:ie缓冲比较严重,修改样式后,一定要ctrl+shift+del 进行缓冲清理,没准清理完缓冲你的样式就起作用了,问题就解决了<style> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .el-cascader__tags > span { flex: auto; } i.el-cascader-node__postfix {转载 2020-11-27 16:34:24 · 556 阅读 · 0 评论 -
element-ui 多选级联cascader 选择器回显问题
大家在使用element-ui的时候肯定会遇到这样一个问题就是在你使用级联选择器的时候,假设后台给你的数据是1,3,6,而你的的级联选择器选中后绑定的值可能是这样的[[1],[2,3],[4,5,6]],它直接将所有的父级都保存下来了。所以我们前端在编辑的时候进行回显就很难受,还要处理一下。今天是我带来的最笨的方法进行处理操作,话不多说直接看代码吧条件:1、后端接口需要的字段是interfaceCateId,值是字符串类型'1,2,3'2、前端请求到的接口是interfaceCate...转载 2020-12-01 10:51:30 · 3645 阅读 · 0 评论 -
解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
在使用element-ui级联选择器的过程中,发现出现 空级联 的bug首先我们分析出现空级联原因是:由于数据是从后台传递过来的,当后端的老铁使用递归算出菜单,然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。解决办法: 在前台js代码中,同样使用递归的方式,将最底层中的 children设为undefinedHTML部分: <el-cascader :change-on-...转载 2020-12-01 10:43:55 · 2135 阅读 · 0 评论 -
element ui 实现table序号递增
实现table序号递增element ui 实现table序号递增:(pageNo - 1) * pageSize + scope.$index + 1如何使用:<el-table-column label="序号" type="index" width="40" align="center"> <template slot-scope="scope"> <span>{{(pageNo - 1) * pageS转载 2020-12-01 10:29:32 · 968 阅读 · 0 评论