vue在antDesign框架或elementUI框架組件native事件中觸發(fā)問題怎么解決

這篇文章主要介紹了vue在antDesign框架或elementUI框架組件native事件中觸發(fā)問題怎么解決的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue在antDesign框架或elementUI框架組件native事件中觸發(fā)問題怎么解決文章都會(huì)有所收獲，下面我們一起來看看吧。

vue在antDesign或elementUI組件native事件中觸發(fā)2次

打印event.target

核心思想是設(shè)置下event.target的過濾

運(yùn)用ant-design-vue組件庫(kù),且在項(xiàng)目中遇到的問題

難以改變的默認(rèn)樣式

可能大家在運(yùn)用到組件庫(kù)的時(shí)候都會(huì)遇到要改變其組件自帶的樣式，組件自帶的都難以去改變，下面來看看，這種方法很有效果。。。。。

首先，!important

對(duì)于一般的組件樣式，找到你要改變其組件的class名，在樣式后加上！important，它的權(quán)重比較高，。

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

其次，/deep/

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

最后，如果以上兩個(gè)都不好用，::v-deep最好的選擇

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

讓通知提醒框的內(nèi)容自動(dòng)換行

一撮內(nèi)容，在js的地盤，也不可能讓我在里面插入個(gè)<br/>或者\(yùn)n,而且還是從后端返回的多條數(shù)據(jù)，最終還是解決了&hellip;

沒改變之前，是這個(gè)樣子的

 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,
  });
},

運(yùn)用了descriptionAPI的特性，function(h)，可以理解是vue里的一個(gè)render函數(shù)里面的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組件表格出現(xiàn)時(shí)間時(shí),格式問題

對(duì)于后端返回的數(shù)據(jù)，有的數(shù)據(jù)直接渲染就可以，但是有的還要改變其格式，方可展示，那就用到了customRender，當(dāng)然也少不了時(shí)間格式的轉(zhuǎn)換moment

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

在需要改變的數(shù)據(jù)columns中，加上customRender，就能實(shí)現(xiàn)時(shí)間格式的轉(zhuǎn)換了

{
    title: "上傳時(shí)間",
    dataIndex: "updateTime",
    width: '20%',
    customRender: (text, row, index) => {
    return (
    <a  href="javascript:;" rel="external nofollow" >
    {formatterTime(text)}
     </a>
    );
   }
 },

當(dāng)你遇到這樣的bug時(shí)，可能出現(xiàn)了這樣的問題

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

Cannot read property &lsquo;0&rsquo; of undefined”

出現(xiàn)這個(gè)錯(cuò)誤的原因其實(shí)是Vue在拿到數(shù)據(jù)之前就渲染了dom，那么在你的html結(jié)構(gòu)中加上v-if，某個(gè)數(shù)據(jù)的長(zhǎng)度，如：

v-if="dataList.length>0

“ReferenceError: h is not defined”

原因：在用到colums，沒放到data里定義，會(huì)報(bào)錯(cuò)

關(guān)于“vue在antDesign框架或elementUI框架組件native事件中觸發(fā)問題怎么解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue在antDesign框架或elementUI框架組件native事件中觸發(fā)問題怎么解決”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。