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

更新時間：2022年04月22日 15:07:46 作者：risenew

這篇文章主要介紹了vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

打印event.target

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

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

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

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

首先，!important

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

.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;
}

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

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

沒改變之前，是這個樣子的

 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里的一個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ù)據(jù)，有的數(shù)據(jù)直接渲染就可以，但是有的還要改變其格式，方可展示，那就用到了customRender，當(dāng)然也少不了時間格式的轉(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)時間格式的轉(zhuǎn)換了

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

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