Element-UI 另类技巧

el-scrollbar 滚动条

<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>

el-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('phone', 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-table 表格内容超出省略

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