ElementUI 是自己比较钟爱的一套 vue 组件库，自己好几个项目里都在用它。一直以来这些丰富的组件，让我能快速的搞定各种后台管理页面，极大地提高了工作效率。 但是不管什么软件，肯定都没办法称之为完美，而最近的几个小需求中，也发现了 element ui 的一些不足（也可能是因为自己的需求比较奇葩吧）。其中一点就是本文要提到的，radio 绑定对象类型值的问题。 具体现象就是，当通过 mapState 方法自动一个计算对象数组，然后将它...
elementUI 动态生成几行几列 table现在碰到一个需求：就是根据用户选择的行列，来自动生成相应大小的 table，如下这个实现还不完善，因为数据不对，只是实现了动态的效果，仅是提供一种实现思路吧，后续我会再想想看怎么实现为好，先记录一下吧 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>elementUI table 动态生成列</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><s...
elementui之新版本组件使用报错未注册问题 现在elementui已经更新到2.10.1也新加了一些组件，也给我们带来了很多的方便，再此非常感谢elementui，但是在有些版本中有些组件，应该是不太兼容，不知道大家有没有遇到过，下面我说下我遇到的两个小问题 我们习惯开发的时候看的文档都是最新的文档，当你去使用一些组件例如，无限滚动，日历这些，可能会遇到未注册的报错报错是未注册这个组件，原因是你的elementui版本太低小于2.8.0，那...
现在好多应用场景里会有一些需要给文章打标签等类似的操作，之前jquery用户是使用taginput来实现，使用VUE以后elementui有一个组件非常简单就是tag组件。<el-tag:key="tag"v-for="tag in dynamicTags"closable:disable-transitions="false"@close="handleClose(tag)">{{tag}} </el-tag> <el-inputclass="input-new-tag"v-if="inputVisible"v-model="inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputCon...
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style media="screen" type="text/css">#appLoading {width: 100%;height: 100%;}#appLoading span {position: absolute;display: block;font-size: 50px;line-height: 50p...
elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <div><el-radio-group v-model="radioSex" @change="changeHandler"><el-radio class="radio" label="man">男</el-radio><el-radio class="radio" label="woman">女</el-radio> </el-radio-group> </div> export default {name: Radio,data () {return {radioSex: man}},methods: {changeHandler(value) {console.log(改变之后的值是: +...
当我们在做后台管理系统时，经常会遇到非常复杂的表单： 表单项非常多在各种表单类型下，显示不同的表单项在某些条件下，某些表单项会关闭验证每个表单项还会有其他自定义逻辑，比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。在这种错综复杂的情况下，完成表单的验证和提交可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案方案1： 在一个 vue 文件中 所...
不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件 在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去 <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab"><!-- ...
这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够完美，一直只存着草稿。 经过多个平台实践，多次迭代，一些功能加了又减了，最后还是回归了最精简的版本，已适用于大部分的场景，若有需要，可自行扩展。 关键逻辑使用 keep-alive 来缓存各标签页通过 vue-router 的 beforeEach 方法来更新标签信息通过 vuex 来保存标签信息通过 vuex 来使关闭页不被缓存核心代码定义 vuex 的跨页变量（store/index.js) ...
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构：{ "title":123455, "email":123456@qq.com, "list": [{"id": "quis consequat culpa ut pariatur","name": "et quis irure dolore ullamco","ompany": "sunt mollit","address": "anim reprehenderit aliquip labore velit"},{"id": "","name": "laborum magna","company": "mollit esse ipsum quis","address": "cillum dolore ex ut"},] }在遇到某个字段值比如l...
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <template><div class=""><div class="top"><!-- 筛选 --><div class="screen"><div style="width:30%">筛选：</div><el-input type="search" v-model="search" style="width:70%" placeholder="请输入关键字"></el-input></div></div><!-- 表格 --><div class="table"><el-table:data="tables"style="width: 100%"max-height=50...
elementUI select组件使用详解 动态生成option选项option选项绑定对应的文本值和value值作为表单项目，新增、编辑功能对选项改变后触发相关事件<div id="app"><el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm"><el-form-item label="姓名选择" prop="typeId"><el-select v-model="form.typeId" placeholder="请选择" @change="change"><el-option v-for="item in items" :label="item.name" :value="...
select组件的使用方式就不细说，可查看select组件使用方式 主要要说一下注意事项：select组件可以动态生成option选项，option选项绑定对应的文本值和value值。有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是：v-model绑定的值与option选项value值类型不符，常规就是number与string 通用我们会循环一个数组、对象生成option选项 1.简单数组 const array1=[1,2,3]<el-select v-model="seletV...
一、介绍 简介：在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。 图片介绍： 1、在用户选择单选或多选时会有A,B,C,D,E五个选项2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）问题引入：当用户选择不同的题库时会产生不同的form表单选项，这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断，这个时候就需要两个rules...
最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。 但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。 而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。 1、自定义表头代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，headerDatas.label其实就是表头的...