element ui 中table表格刷新、input输入框添加enter触发搜索、连续点击的处理办法

8-25小结

1、table表格刷新

elementy ui有一个v-loading 我们可以给它绑定一个布尔值 truer就是转圈圈，false就是停止转圈圈。在刷新按钮上绑定一个事件来控制这个布尔值的改变， 但是需要加一个定时器才能看出来效果 代码如下

这里绑定了一个刷新的事件 refreshHandle

 //刷新功能
   refreshHandle() {
    this.isloading = true
     setTimeout(async () => {
        await this.getDeptList()    // 这里是拿到数据
        this.isloading = false   // 计时器结束 停止转圈圈
        // 下面是控制table展开和隐藏的  让每次刷新 这些数据都展开
        this.refreshTable = false 

        this.Expand = true

        this.$nextTick(() => {
        this.refreshTable = true
      })
      }, 100)

经过上面的功能就可以实现刷新了

2、input输入框的按下enter键 也可以查询

比如我们想通过输入一个用户名来查询一个用户，可以点击查询按键 也可以使用enter直接查询 可以直接给input绑定一个@keyup.enter.native = “绑定事件” 这个事件和你查询按钮的事件一样控制查询的功能

3、连续点击的处理办法

目的是不让用户多次点击造成请求的多次响应， 可以使用节流的办法，在规定时间内 只有第一次点击有效，或者设置一个loading 让按钮点击后有一个Loading的效果 也可以避免

加油加油