Summary of 10 amazing tricks of Element-UI

el-scrollbar scroll bar
el-upload simulates click
el-select drop-down box options are too long
el-input cannot have spaces at the beginning or end
el-input type=number Input Chinese characters and move the focus up
el-input type=number removes the up and down arrows when focused
el-form only checks one field in the form
el-dialog reopens the pop-up window and clears the form information
The destroy-on-close property setting of el-dialog is invalid
el-table The table content exceeds the omission

el-scrollbar scroll bar

Does this component look unfamiliar to you? That’s right, because it has never appeared on the element official website (probably due to performance issues). But how can a good thing be hidden? Here are the renderings.

Isn’t it much more beautiful than the native scroll bar? The method of use is also very simple:

<el-scrollbar>
  <div class="box">
    <p v-for="item in 15" :key="item">Welcome to use el-scrollbar {{item}}</p>
  </div>
</el-scrollbar>

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

As long as the height of the scrollbar's inner box exceeds the height of the scrollbar, a scrollbar will appear, and the same applies to the horizontal scrollbar.

el-upload simulates click

Sometimes we want to use the upload function of el-upload, but don’t want to use the style of el-upload. How to achieve it? The method is also very simple, just hide el-upload and then simulate a click.

<button @click="handleUpload">Upload file</button>
<el-upload
  v-show="false"
  class="upload-resource"
  multiple
  action=""
  :http-request="clickUploadFile"
  ref="upload"
  :on-success="uploadSuccess"
>
    Upload local files</el-upload>

<script>
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 the upload is successful, clear the component's built-in file list uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

el-select drop-down box options are too long

Many times the content of the drop-down box is uncontrollable. If the options in the drop-down box are too long, it will inevitably lead to a very inconsistent page. The solution is to omit the single line and add a text prompt.

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="Please select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
        <el-tooltip
          placement="top"
          :disabled="item.label.length<17"
        >
            <div slot="content">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
    </el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'Option 1',
          label: 'Golden cake, golden cake, golden cake, golden cake, golden cake, golden cake, golden cake, golden cake, golden cake'
        }, {
          value: 'Option 2',
          label: 'Double skin milk, double skin milk, double skin milk, double skin milk, double skin milk, double skin milk, double skin milk, double skin milk'
        }, {
          value: 'Option 3',
          label: 'Oyster omeletOyster omeletOyster omeletOyster omeletOyster omeletOyster omeletOyster omeletOyster omelet'
        }],
        value: ''
      }
    }
  }
</script>

<style scoped>
.el-select {
  width: 300px;
}
.el-select ::v-deep .popper-class {
  width: 300px;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

The effect is as follows:

el-input cannot have spaces at the beginning or end

When we use the input box, most of the time we don't want users to enter spaces before and after. Is there a simple way to check it? Of course there is.

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="Activity Name" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules:
                name: [
                        { required: true, message: 'Please enter the activity name', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/, message: 'The first and last spaces cannot be', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

The effect is as follows:

el-input type=number Input Chinese characters and move the focus up

When el-input is set to type="number", Chinese characters will not be displayed when input, but the focus will move up.

Solution:

<style scoped>
::v-deep .el-input__inner {
    line-height: 1px !important;
}
</style>

el-input type=number removes the up and down arrows when focused

Solution:

<el-input class="clear-number-input" type="number"></el-input>

<style scoped>
.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;
}
</style>

el-form only checks one field in the form

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('send!'); 
    } else { 
        console.log('error send!'); 
        return false; 
    }
})

el-dialog reopens the pop-up window and clears the form information

Some people will reset the form in $nextTick when opening the popup, but I choose to reset it after closing the popup:

<el-dialog @closed="resetForm">
    <el-form ref="form">
    </el-form>
</el-dialog>

<script>
export default {
    methods: {
        resetForm() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

The destroy-on-close property setting of el-dialog is invalid

After 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 is not destroyed.
Solution: Add v-if to el-dialog.

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>

el-table The table content exceeds the omission

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

<el-table-column
  prop="address"
  label="Address"
  width="180"
  show-overflow-tooltip
>
</el-table-column>

The effect is as follows:

This is the end of this article about the summary of 10 amazing Element-UI tricks. For more related Element tricks, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: