Shulou(Shulou.com)06/03 Report--

This article will explain in detail what skills you have in using Element-UI. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

El-scrollbar scroll bar

See whether this component is a little strange, strange, because it has never appeared on the element official website (probably a performance problem), but how can the good stuff be hidden, come to the effect picture.

Is it much more beautiful than the native scroll bar, and the method is very easy to use:

Welcome to el-scrollbar {{item}}

.el-scrollbar {border: 1px solid # ddd; height: 200px;} .el-scrollbar:: v-deep. El-scrollbar__wrap {overflow-y: scroll; overflow-x: hidden;}

As long as the height of the box inside the scrollbar exceeds the height of the scrollbar, a scroll bar appears, and the horizontal scroll bar is the same.

El-upload Simulation Click

Sometimes we want to use the upload function of el-upload, but do not want to use the style of el-upload, how to achieve it? The method is also very simple, hide el-upload, and then simulate the click on it.

Upload file upload local file export default {methods: {/ / simulate click handleUpload () {document.querySelector (".upload-resource. El-upload") .click ()}, / / upload file async clickUploadFile (file) {const formData = new FormData () formData.append ('file') File.file) const res = await api.post (`xxx`, formData)} / / after uploading successfully Clear the list of files included with the component uploadSuccess () {this.$refs.upload.clearFiles ()} el-select drop-down box option is too long

In many cases, the content of the drop-down box is uncontrollable, if the content of the drop-down box option is too long, it is bound to cause the page to be very incongruous. The solution is to save one line and add text prompts.

{{item.label}} {{item.label}} export default {data () {return {options: [{value: 'option 1 cake, label:' golden cake'}, {value: 'option 2' Label: 'double skin milk'}, {value: 'option 3, label:' fried oyster'}], value:'}}. El-select {width: 300px } .el-select:: v-deep. Popper-class {width: 300px;} .iclass-text-ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

The effect is as follows:

El-input cannot be a space from beginning to end

When we use the input input box, most of us do not want users to enter spaces before and after. Is there a simple way to check it? of course there is.

Export default {data () {return {form: {name:'}, rules: {name: [{required: true, message: 'enter the activity name', trigger: 'blur'} {pattern: / ^ (?!\ s +). (?

The effect is as follows:

El-input type=number input Chinese, focus up

When el-input sets type= "number", enter Chinese, although the Chinese will not be displayed, but the focus will move up.

Solution:

:: v-deep. El-input__inner {line-height: 1px! important;} el-input type=number up and down arrows when removing focus

Solution:

.clear-number-input:: v-deep input [type= "number"]::-webkit-outer-spin-button,.clear-number-input:: v-deep input [type= "number"]::-webkit-inner-spin-button {- webkit-appearance: none! important;} el-form validates only one of the form fields

Sometimes we need to verify some fields separately, such as sending a verification code and verifying the mobile phone number separately. We can do this:

This.$refs.form.validateField ('name', valid = > {if (valid) {console.log (' sendings');} else {console.log ('error sendings'); return false;}}) el-dialog reopens the pop-up window to clear the form information

Someone will reset the form in $nextTick when the pop-up window is opened, and I choose to reset it after closing the pop-up window:

Invalid destroy-on-close property setting for export default {methods: {resetForm () {this.$refs.form.resetFields ()} el-dialog

When destroy-on-close is set to true, it is found that the DOM element is still there after the pop-up window is closed and has not been destroyed.

Solution: add v-if to el-dialog.

El-table table content exceeds ellipsis

When the content of the table is too long, it is troublesome to add styles manually. I'll tell you secretly that you only need to add a show-overflow-tooltip.

The effect is as follows:

This is the end of this article on "what are the skills for using Element-UI?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.