el-scrollbar 滚动条

看到这个组件是不是有点陌生，陌生就对了，因为它从来没有出现在 element 官网上（估计是性能问题），但好东西怎么能藏着掖着，来上效果图。

是不是比原生的滚动条美观多了，使用方法也非常简单：

<el-scrollbar>
  <div class="box">
    <p v-for="item in 15" :key="item">欢迎使用 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>

只要 scrollbar 内部盒子的高度超过 scrollbar 的高度就会出现滚动条，横向滚动条同理。

el-upload 模拟点击

有时候我们想用 el-upload 的上传功能，但又不想用 el-upload 的样式，如何实现呢？方法也很简单，隐藏 el-upload，然后再模拟点击就可以了。

<button @click="handleUpload">上传文件</button>
<el-upload
  v-show="false"
  class="upload-resource"
  multiple
  action=""
  :http-request="clickUploadFile"
  ref="upload"
  :on-success="uploadSuccess"
>
    上传本地文件
</el-upload>

<script>
export default {
    methods: {
        // 模拟点击
        handleUpload() {
            document.querySelector(".upload-resource .el-upload").click()
        },
        // 上传文件
        async clickUploadFile(file) {
            const formData = new FormData()
            formData.append('file', file.file)
            const res = await api.post(`xxx`, formData)
        }
        // 上传成功后，清空组件自带的文件列表
        uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

el-select 下拉框选项过长

很多时候下拉框的内容是不可控的，如果下拉框选项内容过长，势必会导致页面非常不协调，解决办法就是，单行省略加文字提示。

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
    <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: '选项1',
          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
        }],
        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>

效果如下：

el-input 首尾不能为空格

我们在使用 input 输入框时，大多不希望用户在前后输入空格，有没有简单的校验方法呢，当然是有的。

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活动名称" 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: '请输入活动名称', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

效果如下：

el-input type=number 输入中文，焦点上移

当 el-input 设置 type="number" 时，输入中文，虽然中文不会显示出来，但焦点会上移。

解决办法：

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

el-input type=number 去除聚焦时的上下箭头

解决办法：

<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 只校验表单其中一个字段

有时候我们需要单独校验一些字段，比如发送验证码，单独对手机号进行校验，可以这样做：

this.$refs.form.validateField('name', valid => {
    if (valid) { 
        console.log('send!'); 
    } else { 
        console.log('error send!'); 
        return false; 
    }
})

el-dialog 重新打开弹窗，清除表单信息

有人会在打开弹窗时，在$nextTick里重置表单，而我选择在关闭弹窗后进行重置：

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

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

el-dialog 的 destroy-on-close 属性设置无效

destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在，没有被销毁。
解决办法：在 el-dialog 上添加 v-if。

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

el-table 表格内容超出省略

当表格内容过长时，手动添加样式比较麻烦，偷偷告诉你，只需要添加一个 show-overflow-tooltip 就可以搞定。

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

效果如下：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中hasOwnProperty方法返回什么，具体用法是怎样

  这篇文章主要介绍了js属性对象的hasOwnProperty方法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• JavaScript字符串转数字怎样做？有什么方法？

  JavaScript字符串转数字怎样做？在实际的项目中，常需要实现数据类型转换，对此本文就给大家简单的介绍一下字符串转数字的方法，对新手学习JavaScript数据类型转换有一定的帮助，接下来我们一起看看吧。

• Node.js中EventEmitter模块如何使用，要注意什么？

  这篇文章我们来了解Node.js中EventEmitter模块的使用，EventEmitter是 Node.js 的内置模块，能提供事件订阅机制，对此下文主要给大家讲讲要怎样使用它，感兴趣的朋友接下来就跟随小编来了解看看吧！

• jQuery怎样实现文本框字数限制的功能？

  这篇文章给大家分享的是jQuery怎样对文本框字数限制的方法。一般的文本输入框都是有字数限制的，下文我们尝试用jQuery怎样计算输入字数及控制和限制字数，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 怎样用JS代码实现防自己网站文章被采集呢?

  为什么要学会网站防采集方法：通过JavaScript禁止F12，禁止Ctrl+s，禁止ctrl+u，禁止选中文字，禁止鼠标右键等方法？ 作为一名网站站长，相信大家都应该听说过“文章采集”，自己原创手写的文章半小时内被别人原模原样采集走了，最可气的是自己发布的文章没