element ui使用教程,element ui菜鸟教程
摘要：本文主要介绍了Element-UI的10个奇异技巧的总结，并通过示例代码进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
el-scrollbar滚动条El-上传模拟点击El-选择下拉框选项过长，El-输入的开始和结束不能为空El-输入type=number，输入中文，将焦点上移El-输入type=number去掉焦点中的上下箭头。el-form只验证表单el-dialog的一个字段。重新打开弹出窗口，清除表单信息el-dialog的关闭时销毁属性设置。el-table表的内容超过了省略。
el-scrollbar 滚动条
看这个组件有点奇怪没错，因为它从来没有出现在element的官网上(估计是性能问题)，但是好东西怎么藏起来放到效果图上呢？
是不是比原生滚动条好看多了，而且使用方法也很简单：
el滚动条
div class=box
P-for= item in 15: key= item 欢迎使用el-scrollbar {{item}}/p
/div
/El-滚动条
样式范围。el滚动条{
边框：1px solid # ddd
高度：200px
}。el-scrollbar :v深。el滚动条__wrap {
溢出-y:滚动；
溢出-x:隐藏；
}
/风格
只要滚动条内部的方框高度超过滚动条的高度，就会出现滚动条，水平滚动条也是一样。
el-upload 模拟点击
有时候我们想用el-upload的上传功能，但又不想用el-upload的风格。如何才能实现这一点？方法也很简单，隐藏el-upload然后模拟点击即可。
Button @click=handleUpload 上传文件/button
El-上传
v-show=false
class=上载-资源
多个的
操作=
:http-request=clickUploadFile
ref=上传
:on-success=uploadSuccess
上传本地文件
/El-上传
脚本
导出默认值{
方法：{
//模拟点击
handleUpload() {
document.querySelector(。上传-资源。El-上传’)。单击()
},
//上传文件
异步clickUploadFile(file) {
const formData=新表单数据()
formData.append(file ，file.file)
const res=await api.post(`xxx ，formData)
}
//上传成功后，清除组件自带的文件列表。
uploadSuccess() {
这个。$refs.upload.clearFiles()
}
}
}
/脚本
el-select 下拉框选项过长
很多时候，下拉框的内容是不可控的。如果下拉框选项的内容过长，必然会导致页面非常不协调。解决方法是省略单行并添加文本提示。
El-select popper-class= popper-class :popper-append-to-body= false v-model= value placeholder= please select
el选项
v-for=选项中的项目
:key=item.value
:label=item.label
:value=item.value
El-工具提示
placement=top
:disabled=item.label.length17
div slot=content
span{{item.label}}/span
/div
div class= iclass-text-ellipsis { { item . label } }/div
/El-工具提示
/el选项
/el-select
脚本
导出默认值{
data() {
返回{
选项：[{
值：“选项1”，
标签:“金饼，金饼，金饼，金饼，金饼，金饼”
}, {
值：“选项2”，
标签:“双份牛奶，双份牛奶，双份牛奶，双份牛奶，双份牛奶，双份牛奶”
}, {
值：“选项3”，
标签:“蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎”
}],
值：“”
}
}
}
/脚本
样式范围。El-选择{
宽度：300px
}。el-select :v-deep。波普级
宽度：300px
}。iclass-text-省略号{
空白：nowrap
溢出：隐藏；
文本溢出：省略号；
}
/风格
效果如下：
el-input 首尾不能为空格
我们在使用投入输入框时，大多不希望用户在前后输入空格，有没有简单的校验方法呢，当然是有的。
El-form:rules= rules :model= form label-width= 80px
El-表单-项目标签=活动名称prop=name
埃尔输入v-model=form.name/el输入
/El-表单-项目
/el格式
脚本
导出默认值{
data() {
返回{
表单：{
名称：""
},
规则：{
名称：[
{必需：真，消息： 请输入活动名称，触发：模糊 },
{图案：/^(?\s).*(?\s)$/，消息： 首尾不能为空格，触发器：模糊 }
]
}
}
}
}
/脚本
效果如下：
el-input type=number 输入中文，焦点上移
当埃尔输入设置type=number 时，输入中文，虽然中文不会显示出来，但焦点会上移。
解决办法：
样式范围
*深v型100 . El输入_ _内部{
行高：1px！重要；
}
/风格
el-input type=number 去除聚焦时的上下箭头
解决办法：
El-input class= clear-number-input type= number /El-input
样式范围。clear-number-input:v-deep input[type= number ]:-WebKit-outer-spin-button。clear-number-input:v-deep input[type= number ]:-WebKit-inner-spin-button {
-网络工具包-外观：无！重要；
}
/风格
el-form 只校验表单其中一个字段
有时候我们需要单独校验一些字段，比如发送验证码，单独对手机号进行校验，可以这样做：
这个. refs.form.validateField(name ，valid={
如果（有效){
console.log(send！);
}否则{
console.log(错误发送!);
返回错误的
}
})
el-dialog 重新打开弹窗，清除表单信息
有人会在打开弹窗时，在$nextTick里重置表单，而我选择在关闭弹窗后进行重置：
el-dialog @closed=resetForm
el-form ref=form
/el格式
/el-dialog
脚本
导出默认值{
方法：{
resetForm() {
这个. refs.form.resetFields()
}
}
}
/脚本
el-dialog 的 destroy-on-close 属性设置无效
关闭时销毁设置为真实的后发现弹窗关闭后数字正射影像图元素仍在，没有被销毁。
解决办法：在埃尔对话上添加如果。
El-dialog:可见。sync= visible v-if= visible 关闭时销毁
/el-dialog
el-table 表格内容超出省略
当表格内容过长时，手动添加样式比较麻烦，偷偷告诉你，只需要添加一个显示溢出工具提示就可以搞定。
埃尔-表格-列
prop=地址
标签=地址
宽度=180
显示溢出工具提示
/El-表格-列
效果如下：
到此这篇关于元素-用户界面10个奇淫技巧小结的文章就介绍到这了，更多相关元素奇淫技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。