8-25小结

1、table表格刷新

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

  <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh" size="mini" @click="refreshHandle"> </el-button>
          </el-tooltip>

这里绑定了一个刷新的事件 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的效果 也可以避免

加油加油

# javascript # 开发语言 # ecmascript # elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue