[个人用] ElementUI项目常用的工具函数

表格切换分页时将表格滚动到顶部

this.$refs.tableComponent.bodyWrapper.scrollTo({
  top: 0,
  behavior: "smooth",
});

tableComponent为表格组件的实例

关闭弹窗后将弹窗的滚动条回到顶部

this.$refs.dialogComponent.$refs.dialog.childNodes[1].scrollTo({
  top: 0,
  behavior: "auto",
});

dialogComponent为弹窗组件的实例

vue2 的仅监听一次效果

export default{
  mounted() {
    const unwatch = this.$watch("dialogVisible", () => {
      // your code
      unwatch(); // 停用侦听器,此例子为仅侦听弹框打开的那一次
    });
  },
}

上面的代码监听了控制弹窗显示的变量.通常用于请求接口且仅请求这一次,避免多次打开弹窗反复请求接口

vue自定义事件防止按钮双击

// preventDoubleClick.js
export default Vue => {
  Vue.directive(
    "preventreclick",
    {
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 3000);
          }
        });
      }
    }
  );
};

// main.js
import preventDoubleClick from '@/utils/preventDoubleClick.js';
Vue.use(preventReClick);

然后在按钮组件上添加v-preventreclick即可

多个表单验证

// validateForms.js
export function validateForms(formRefs) {
  let objectList = [];
  let results = formRefs.map(
    (formRef) =>
      new Promise((resolve, reject) => {
        formRef.validate((valid, object) => {
          if (valid) {
            resolve();
          } else {
            objectList.push(object);
            reject();
          }
        });
      })
  );
  return Promise.all(results).catch(() => {
    return Promise.reject(objectList);
  });
}

使用方法

// vue组件内
import { validateForms } from "@/utils/validateForms.js"; // 先引入工具
export default {
  methods: {
    submit() {
      const formRefs = ["form1", "form2"].map((key) => this.$refs[key]);
      validateForms(formRefs)
        .then(() => {
          // 验证成功的代码
        })
        .catch(() => {
          // 验证失败的代码
        });
    },
  },
};

form1和form2为表单组件的实例