vue在antDesign框架或elementUI框架组件native事件中触发2次问题

目录
  • vue在antDesign或elementUI组件native事件中触发2次
  • 运用ant-design-vue组件库,且在项目中遇到的问题
    • 难以改变的默认样式
    • 让通知提醒框的内容自动换行
    • table组件表格出现时间时,格式问题

vue在antDesign或elementUI组件native事件中触发2次

打印event.target

核心思想是设置下event.target的过滤

运用ant-design-vue组件库,且在项目中遇到的问题

难以改变的默认样式

可能大家在运用到组件库的时候都会遇到要改变其组件自带的样式，组件自带的都难以去改变，下面来看看，这种方法很有效果。。。。。

首先，!important

对于一般的组件样式，找到你要改变其组件的class名，在样式后加上！important，它的权重比较高，。

.ant-select {
  width: 145px !important;
}
.happy-scroll-content {
  width: 100% !important;
}

其次，/deep/

/deep/ .happy-scroll-content {
  width: 100% !important;
}

最后，如果以上两个都不好用，::v-deep最好的选择

 ::v-deep .ant-col {
  margin-bottom: 7px;
}

让通知提醒框的内容自动换行

一撮内容，在js的地盘，也不可能让我在里面插入个<br/>或者\n,而且还是从后端返回的多条数据，最终还是解决了…

没改变之前，是这个样子的

 openNotification() {
  this.$notification.open({
    message: 'Notification Title',
    description:
      'I will never close automatically. I will be close automatically. I will never close automatically.',
    duration: 0,
  });
},

运用了descriptionAPI的特性，function(h)，可以理解是vue里的一个render函数里面的createElement，这里就不过多讲解，直接贴代码了，效果如下：

 this.$notification[type]({
       message: h=>{return h('div',{style:{'font-size':'14px'}},str)},
       description: h => {
       return h("div",this.tips.map(function(item){
       return h('li',{style:{'font-size':'12px'}},item)//可以改变其li的样式
  }));
   },
   duration: 10,
   });

table组件表格出现时间时,格式问题

对于后端返回的数据，有的数据直接渲染就可以，但是有的还要改变其格式，方可展示，那就用到了customRender，当然也少不了时间格式的转换moment

import moment from "moment";
const formatterTime = val => {
  return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : "";
};

在需要改变的数据columns中，加上customRender，就能实现时间格式的转换了

{
    title: "上传时间",
    dataIndex: "updateTime",
    width: '20%',
    customRender: (text, row, index) => {
    return (
    <a style="color:#000" href="javascript:;" rel="external nofollow" >
    {formatterTime(text)}
     </a>
    );
   }
 },

当你遇到这样的bug时，可能出现了这样的问题

vue.runtime.esm.js?0261:619 [Vue warn]: Error in render: “TypeError:

Cannot read property ‘0’ of undefined”

出现这个错误的原因其实是Vue在拿到数据之前就渲染了dom，那么在你的html结构中加上v-if，某个数据的长度，如：

v-if="dataList.length>0

“ReferenceError: h is not defined”

原因：在用到colums，没放到data里定义，会报错

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

赞 (0)

相关推荐

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • 总结Vue Element UI使用中遇到的问题

    总结Vue Element UI使用中遇到的问题

    基于 vue2.0 的 element-ui 框架,使用起来还是很方便的,非常适合快速开发,但是在做自己的项目中还是会碰到这样那样的问题,有些问题官方文档并不是很详尽,以下是我在使用 element-ui 过程中一些常用的或碰到的一些问题笔记. 一.DateTimePicker 日期选择范围为当前时间以及当前时间之前 <template> <div> <el-date-picker size="small" clearable :picker-option

  • 解决vue2中使用elementUi打包报错的问题

    bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:

  • vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.

  • vue在antDesign框架或elementUI框架组件native事件中触发2次问题

    vue在antDesign框架或elementUI框架组件native事件中触发2次问题

    目录 vue在antDesign或elementUI组件native事件中触发2次 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 让通知提醒框的内容自动换行 table组件表格出现时间时,格式问题 vue在antDesign或elementUI组件native事件中触发2次 打印event.target 核心思想是设置下event.target的过滤 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 可能大家在运用到组件库的时候

  • 简易Vue评论框架的实现(父组件的实现)

    最近看到一个需求: 实现一个评论功能,要求对评论列表进行分页显示 对相应模块实现组件化 能显示发布者.发布时间以及内容 乍一看不是很难,但是在具体的实现上还是遇到了一些问题.此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的. 源码地址 评论表单代码: <!-- 文档结构区开始 --> <template> <div id="comment" > <UserDiv @transferUse

  • vue框架和react框架的区别以及各自的应用场景使用

    目录 一.框架简介 二.相同点 三.区别 四.适用场景 使用Vue的场景 使用React的场景 五.总结 Vue的优势包括 React的优势包括 一.框架简介 React主张是函数式编程的理念, 实现了前端界面的高性能高效率开发,react很擅长处理组件化的页面.React的官方网站提到了“学习一次,随处写作”这个关键功能,可以使用React框架在JavaScript中构建移动应用程序.在 React 中,所有的组件的渲染功能都依靠 JSX,它是JavaScript的语法扩展,它在创建UI组件和

  • Yii框架组件和事件行为管理详解

    Yii框架组件和事件行为管理详解

    本文实例讲述了Yii框架组件和事件行为管理.分享给大家供大家参考,具体如下: Yii是一个基于组件.用于开发大型 Web 应用的高性能 PHP 框架.CComponent几乎是所有类的基类,它控制着组件与事件的管理,其方法与属性如下,私有变量$_e数据存放事件(evnet,有些地方叫hook),$_m数组存放行为(behavior). 组件管理 YII是一个纯oop框架,很多类中的成员变量的受保护或者私有的,CComponent中利用php中的魔术方法__get(),__set()来访问和设置属

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

  • Python Web框架之Django框架Form组件用法详解

    本文实例讲述了Python Web框架之Django框架Form组件用法.分享给大家供大家参考,具体如下: Form简介 在HTTP中,表单(form标签),是用来提交数据的,其action属性说明了其传输数据的方法:如何传.如何接收. 访问网站时,表单可以实现客户端与服务器之间的通信.例如查询,就用到了表单(其属性中,action=get). 再比如说注册与登陆,也是要用到表单的.但这里由于涉及到隐私问题,需要保证数据传输的安全性,因此其传输方法就应当使用post而非get. 总之,对客户端来

  • Yii框架自定义数据库操作组件示例

    本文实例讲述了Yii框架自定义数据库操作组件.分享给大家供大家参考,具体如下: Yii 的数据库操作对象提供的方法确实很方便. 但是有的时候我们已经习惯了我们以前编写php的数据库操作语法,没有那么多时间去仔细看每个Yii提供的数据库操作语法,怎么办呢? 那就是一边学习,一边二次封装自己习惯的数据库操作类. 以后我们使用数据库操作对象,就用我们自己定义的组件去操作. 将我的数据库操作组件注册进配置文件web.php 中 array( 'components' => array( //自定义数据库

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • Yii框架组件的事件机制原理与用法分析

    本文实例讲述了Yii框架组件的事件机制原理与用法.分享给大家供大家参考,具体如下: 在深入分析 Yii 的运行之前,我们先来看一下 Yii 框架中一个很重要的机制 - 事件. Yii 官方参考文档关于组件事件的解释: ======================================================================= 组件事件是一些特殊的属性,它们使用一些称作 事件句柄 ( event handlers )的方法作为其值. 附加 ( 分配 ) 一个方法到

随机推荐