使用elementui在完成项目中遇到的未知知识点2

 {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },

trigger的意思是当失去焦点时触发,例如出现红色的框

el-pagination指的是分页,一个表格的数据过多,可以使用分页的效果来进行跳转
里面的api分别是 :current-page是指当前页的效果,:page-size指的是下拉框显示当前页显示多少条数据,:total指的是一共有多少的分页

  created() {
    this.leftTableStyle =
      "{ width: 100%; height: " +
      (document.documentElement.clientHeight - 350) +
      "px;}";
    this.heightValue = document.documentElement.clientHeigh - 350 + "px";
    //页面加载即请求
    // this.search();
  }

这里是调用了leftTableStyle方法,主要就是表格需要减去350px的高度,直接操作DOM上的数据,里面用到了clientHeight这个api,不太了解,所以去查询了一下百度,得知:
clientHeight多数指的是视口的高度,scrollHeight指的是包含滚动内容的元素大小,offsetHeight指的是偏移量




里面的属性filterable是指可搜索的,默认值是false,fliter-method接收一个方法,当搜索关键字变化时,会将当前的关键字和数据项传给该方法。若方法返回true,则会在搜索结果中显示相应的数据项

 this.$confirm(
        "确定入库:  " +
          startNum +
          "-" +
          endNum +
          "  号段吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          type: "warning",
        }
      )
        .then(() => {
          let params = this.warehousingConditions;
          this.warehousingLoading = true;
          delete params.submitLevelOption;
          licenceWarehousing(params)
            .then((response) => {
              this.warehousingLoading = false;
              if (response.code === 20000) {
                this.loadData();
                this.$message({
                  message: "入库成功",
                  type: "success",
                });
                return;
              }
            })
            .catch((err) => {
              this.warehousingLoading = false;
              console.log(err);
            });
        })

这里使用的是elementui的确认消息的全局对话框,调用$confirm方法来打开消息提示,这里采用promise来处理后续响应

你可能感兴趣的:(vue.js前端)