element Drawer 抽屉无法渲染

出现的问题

不使用脚手架和node.js时drawer不渲染

原因

没有引入最新的样式

解决方案

cdn引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

element drawer使用中遇到的坑点

业务需求是新增编辑时清空点击编辑按钮时的回显数据

需要清空 el-drawer 里面的数据,有表单,也有不是表单的数据,表单可以使用表单的一次性清空,但是非表单数据该不是要一个个去置空吧,那我要它何用???

遇到问题,我的原则是干掉问题,不是护士问题,你不干掉它,它就会干掉你!~~~~

测试了好久,后才发现原来有个效果就是触发drawer的关闭事件是可以清空回显数据的,一般的this.drawer = false,是无法达到期望效果的

父组件

    <el-drawer
      ref="drawer"
      :title="title"
      size="100%"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      :destroy-on-close="true"
    >
      <add-question ref="addQuestion" :show-more="showMore"></add-question>
    </el-drawer>

add组件里面有子组件

    <div v-if="showQType === 1" ref="formContent" class="c-content">
      <question-single :question-types="questionTypes"></question-single>
    </div>

question-single组件里button

    cancelAdd() {
      bus.$emit('closeDrawer')
      // this.plat.drawer = false  直接设置无法清空数据,残留点击编辑按钮是的回显数据
    }

浪费了大半天时间百度,找不到解决方法,但直觉告诉我,饿了么的人肯定会有解决方法,于是开始啃文档,果不其然,不负所望

经过反复测试,只需要触发这个方法,就可以在点击新增按钮时清空之前编辑后遗留的数据

我自己的方法,由于组件嵌套多,于是用了事件总线bus,直接在mounted里面监听

最后效果,还是很满意的

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

element Drawer 抽屉无法渲染问题及解决的更多相关文章

  1. 使用layui实现左侧菜单栏及动态操作tab项的方法

    这篇文章主要介绍了使用layui实现左侧菜单栏及动态操作tab项的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 在iOS上绘制扭曲的文本

    使用iOS9及更高版本中提供的标准API,如何在绘制文本时实现扭曲效果?

  3. ios – 如果Element符合给定的协议,则扩展阵列以符合协议

    如果是这样,语法是什么?解决方法Swift4.2在Swift4.2中,我能够使用符合这样的协议的元素扩展数组:

  4. ios – 如何在swift中获取2数组的常见元素列表

    (双关语)编辑:,你可以这样做这个实现是丑陋的.

  5. Swift 函数Count,Filter,Map,Reduce

    Count-统计数量文档示例Filter-条件过滤文档示例-过滤长度大于4的字符串也可以简化Map-映射集合类型,返回数组文档示例同样可以简化Reduce-把数组结合到一起文档示例可以简化进一步简化

  6. Swift语法——Swift Sequences 探究

    今天看到Array的API中有这么一个声明的函数:函数名为extend,所需参数是S类型的newElements,而S首先要实现SequenceType协议。看看APTGeneratorType必须要实现一个函数next(),它的作用就是返回一个Element,注释里说的很清楚:它的作用就是一直返回元素,直到最后。1)Swift调用generate()来生成了一个Generator,这个对象是一个私有的变量即__g;2)__g调用了next()函数,返回了一个optional类型对象element?。这个

  7. Swift 中数组和链表的性能

    尽管如此,我觉得链表的例子非常有意思,而且值得实现和把玩,它有可能会提升数组reduce方法的性能。同时我认为Swift的一些额外特性很有趣:比如它的枚举可以灵活的在对象和具体方法中自由选择,以及“默认安全”。这本书未来的版本可能就会用Swift作为实现语言。拷贝数组消耗的时间是线性的。使用链表还有其他的代价——统计链表节点的个数所需要的时间是统计数组元素个数时间的两倍,因为遍历链表时的间接寻址方式是需要消耗时间的。

  8. Swift中集合类型indexOf(Element)提示错误的解决办法

    简单的竟然出错了!其实看一下错误描述,大概就可以猜到Swift此时不知道你自定义类是如何比较的,如果是Swift内置的各种struct和class就不存在这个问题,比如:解决很简单,添加一个==方法即可:最后补充一下,早期版本的Swift还有一个find函数可以完成类似的功能,但是新版本已经没有该函数了,So你懂的…

  9. swift map reduce 获取下标(index)的方法

    原文:http://stackoverflow.com/questions/28012205/map-or-reduce-with-index-in-swiftYoucanuseenumeratetoconvertasequence(Array,String,etc.)toasequenceoftupleswithanintegercounterandandelementpairedtogethe

  10. Swift中的map 和 flatMap 原理及用法

    map和flatMap是Swift中两个常用的函数,它们体现了Swift中很多的特性。对于简单的使用来说,它们的接口并不复杂,但它们内部的机制还是非常值得研究的,能够帮助我们够好的理解Swift语言。map简介首先,咱们说说map函数如何使用。letnumbers=[1,2,3,4]letresult=numbers.map{$0+2}print//[3,4,5,6]map方法接受一个闭包作为参数,然后它会遍历整个numbers数组,并对数组中每一个元素执行闭包中定义的操作。比如咱们这个例子里面的闭包是讲

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部