Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue in the antDesign framework or elementUI framework components native events in the trigger problem of the relevant knowledge, the content is detailed and easy to understand, simple and quick operation, has a certain reference value, I believe that after reading this vue in the antDesign framework or elementUI framework components native events how to solve the problem will have a harvest, let's take a look at it.

Vue is triggered twice in the antDesign or elementUI component native event

Print event.target

The core idea is to set the filtering of event.target

Use the ant-design-vue component library, and the problems encountered in the project are difficult to change the default style

Maybe when you use the component library, you will encounter the need to change the style of the component itself, and it is difficult to change the style of the component itself. Let's take a look at this method.

First of all, important

For general component styles, find the class name of the component you want to change, and add after the style! Important, its weight is relatively high.

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

Second, / deep/

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

Finally, if both of the above don't work,:: the best choice for v-deep

:: v-deep. Ant-col {margin-bottom: 7px;} let the contents of the notification reminder box wrap automatically

A handful of content, in the domain of js, it is impossible for me to insert an or\ ninto it, but also multiple pieces of data returned from the back end, and finally solved …

Before it changed, it looked like this.

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

Using the feature of descriptionAPI, function (h), it can be understood that it is the createElement in a render function in vue. Here, I will not explain too much, but will paste the code directly. The effect is as follows:

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) / / can change the style of li});}, duration: 10,})

Format problem when the table component table appears

For the data returned by the backend, some data can be rendered directly, but some have to change their format before they can be displayed, so customRender is used, and of course, there is no lack of time format conversion moment.

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

The conversion of time format can be realized by adding customRender to the data columns that needs to be changed.

{title: "upload time", dataIndex: "updateTime", width:'20% upload, customRender: (text, row, index) = > {return ({formatterTime (text)});}}

When you encounter such a bug, there may be such a problem.

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

Cannot read property'0' of undefined "

The reason for this error is that Vue rendered dom before getting the data, so add v-if to your html structure, the length of a certain data, such as:

VMI if = "dataList.length > 0"

"ReferenceError: h is not defined"

Reason: when using colums, it will report an error if it is not defined in data.

This is the end of the article on "how to solve the problem triggered by vue in the antDesign framework or elementUI framework component native event". Thank you for reading! I believe you all have a certain understanding of "how to solve the problem triggered by vue in the antDesign framework or elementUI framework component native event". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.