关于vue.js:使用elementui在完成项目中遇到的未知知识点2

52次阅读

共计 1702 个字符，预计需要花费 5 分钟才能阅读完成。

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

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

<el-pagination
:current-page="page.start"
:page-size="page.pageSize"
:total="page.total"
@current-change="handleCurrentChange"
class="main-body-table-page"
layout="total, prev, pager, next, jumper"
></el-pagination>

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 指的是偏移量

<el-select 
v-model="warehousingConditions.passportType" 
@change="passPortButt" 
clearable 
filterable 
 placeholder="请抉择要入库的证照类型">
<el-option 
v-for="item in passportType" 
:key="item.hardcode" 
:label="item.dictname" 
:value="item.hardcode">
</el-option>
</el-select>

外面的属性 filterable 是指可搜寻的，默认值是 false,fliter-method 接管一个办法，当搜寻关键字变动时，会将以后的关键字和数据项传给该办法。若办法返回 true，则会在搜寻后果中显示相应的数据项

 this.$confirm(
        "确定入库:&nbsp;&nbsp;" +
          startNum +
          "-" +
          endNum +
          "&nbsp;&nbsp; 号段吗？",
        "提醒",
        {
          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 来解决后续响应

正文完