Vue中ElementUI的奇淫巧技

Sun Peng

已于 2022-10-11 23:58:49 修改

阅读量990

点赞数 3

分类专栏： Vue框架文章标签： elementui vue.js css

于 2022-01-07 17:59:06 首次发布

原文链接：https://juejin.cn/post/7017957779176423454

版权

Vue框架专栏收录该内容

140 篇文章 9 订阅

订阅专栏

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

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

7、el-form 只校验表单其中一个字段

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

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

10、el-table 表格内容超出省略

11、主题样式修改

12、el-backtop 回到顶部组件

12、el-form-item label宽度自适应

13、el-form-item 循环校验

14、el-form-item 表单嵌套表格校验

15、el-form-item 表单校验 label只保留 *

16、el-select 下拉框样式修改

17、el-input 打开弹框自动聚焦

18、改变表头样式

1、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 的高度就会出现滚动条，横向滚动条同理。

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

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

效果如下：

select组件，在局部DOM全屏的情况下，下拉框不见了。设置：popper-append-to-body=false，就可以解决；如果是整个页面全屏，则正常。

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

效果如下：

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

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

解决办法：

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

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

解决办法：

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

<style scoped>
.input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.input ::v-deep input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
</style>

7、el-form 只校验表单其中一个字段

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

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

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

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

destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在，没有被销毁。

解决办法：在 el-dialog 上添加 v-if。（使用v-if，操作dom，会影响性能）

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

10、el-table 表格内容超出省略

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

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

效果如下：

11、主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

1639302082(1).jpg

第三步，用下载的css文件替换掉默认的css文件

效果如下：

12、el-backtop 回到顶部组件

有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 el-backtop（ElementUI官网自带Backtop 回到顶部 | Element Plus），自带过渡效果。

代码如下：

<template>
  <div class="container">
    <div class="box">Scroll down to see the bottom-right button.</div>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-x: hidden;
  .box {
    padding: 20px;
    height: 1500px;
  }
}
</style>

注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。

13、el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>
  <el-form>
    <el-form-item label="教师">
      <el-input v-model="form.teacher" style="width: 625px;"></el-input>
    </el-form-item>
    <el-form-item label="请选择在线教学平台名称">
      <el-select v-model="form.platform" style="width: 500px;">
        <el-option label="平台一" value="1"></el-option>
        <el-option label="平台二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        teacher: '',
        platform: ''
      }
    }
  }
}
</script>
复制代码

14、el-form-item 循环校验

有时候表单项是一个循环的列表，需要对每一项进行校验。

1639314939(1).jpg

代码如下：

<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item
        v-for="(item, index) in form.list"
        :key="index"
        :label="'评价项目' + (index + 1)"
        :prop="'list.' + index + '.evaluateName'"
        :rules="rules.evaluateName"
      >
        <el-input v-model="item.evaluateName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          }
        ]
      },
      rules: {
        evaluateName: [
          {
            required: true,
            message: '请输入评价项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

15、el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？

1639315824(1).jpg

代码如下：

<template>
  <el-form :model="form" ref="form">
    <el-table border :data="form.list" style="margin-bottom: 10px;">
      <el-table-column
        label="评价项目"
        prop="evaluateName"
        align="center"
      ></el-table-column>
      <el-table-column label="评价等级" align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="'list.' + scope.$index + '.evaluateLevel'"
            :rules="rules.evaluateLevel"
            class="evaluate-level"
          >
            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
              <el-radio
                v-for="evaluationItem in evaluateOptions"
                :key="evaluationItem.value"
                :label="evaluationItem.value"
              >
                {{ evaluationItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            id: '01',
            evaluateName: '指标一',
            evaluateLevel: ''
          },
          {
            id: '02',
            evaluateName: '指标二',
            evaluateLevel: ''
          },
          {
            id: '03',
            evaluateName: '指标二',
            evaluateLevel: ''
          }
        ]
      },
      evaluateOptions: [
        {
          value: '1',
          label: '优'
        },
        {
          value: '2',
          label: '良'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '差'
        }
      ],
      rules: {
        evaluateLevel: [{ required: true, message: '请选择评价等级', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitOpinionCheck() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-level {
  ::v-deep .el-form-item__error {
    width: 100px;
    /* 使校验信息居中 */
    left: calc(50% - 50px);
  }
}
</style>

16、el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *，而不需要 lable 文字，像这样：

1639312147(1).jpg

代码如下：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
    <el-form-item label=" " prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
    </el-form-item>
    <el-form-item label=" " prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],//required: true这个就能实现
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

17、el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>
  <el-form>
    <el-form-item label="活动区域">
      <el-select
        class="form-select"
        :popper-append-to-body="false"
        v-model="form.region"
        placeholder="请选择活动区域"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        region: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-select {
  ::v-deep .el-select-dropdown__item.selected {
    background: pink;
  }
}
</style>

18、el-input 打开弹框自动聚焦

很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。（就是打开对话框鼠标输入线"|"在第一个input框里）

代码如下：

<template>
  <div>
    <el-button type="text" @click="showDialog">
      打开嵌套表单的 Dialog
    </el-button>

    <el-dialog title="活动" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="80px">
          <el-input ref="nameInput" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" label-width="80px">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        content: ''
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      // 如果弹框显示，则自动聚焦
      this.$nextTick(() => {    //这两行为主要代码
        this.$refs.nameInput.focus()
      })
    }
  }
}
</script>

18、改变表头样式：

       <el-table :data="dataList" 
            :header-cell-style="{'color':'#fff','background':'#5862A0'}"//改变表头样式
        >
                <el-table-column prop="sqsj" label="授权时间" />
                <el-table-column prop="wxid" label="微信ID" />
                <el-table-column prop="dhhm" label="电话号码" />
                <el-table-column prop="wxnc" label="微信昵称" />
            </el-table>

作者：前端阿飞
链接：https://juejin.cn/post/7041320033884045326
来源：稀土掘金

Sun Peng

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue中ElementUI的奇淫巧技

el-scrollbar 滚动条看到这个组件是不是有点陌生，陌生就对了，因为它从来没有出现在 element 官网上（估计是性能问题），但好东西怎么能藏着掖着，来上效果图。是不是比原生的滚动条美观多了，使用方法也非常简单：<el-scrollbar> <div class="box"> <p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p> </d
复制链接

扫一扫