關於avue的一些零碎點

最近用到avue，很多繁瑣的東西，除了網上的一些資料外，自己也在在這里記錄一下

借鑒他人的連接：https://www.cnblogs.com/m-jj/p/11872207.html

 

 

自己補充的：

 

1.表格中超出部分省略：

"overHidden": true

2.實現先全屏化彈出框提交，取消，叉按鈕后，全屏化恢復：

調用方法closeDialog()

在里面加上fullscreen =  ！1就行了（或者看一下fullscreen初始值是多少就行）

3.彈出框的提交按鈕（handleSubmit） 取消按鈕（handleReset）

4.校驗方法中，可以對編輯頁面校驗規則寫個：

if (window.boxType === 'edit') callback()

可以實現添加頁面進行參數重復校驗，而編輯頁面不走后端查詢參數方法（即回調）

目前來說 .vue界面用不了callback（），只能用loading的方法進行業務操作，等待后續看有沒有發現新的方法（待修改）

 

 5.如果想要獲取公共的參數值的話，可以先聲明

 searchForm: {

          deptId: ''

        },

 

然后在第一個方法里面聲明：（這個是點擊部門樹以后觸發的方法，獲取部門id值）

nodeClick(data) {

        this.searchForm.deptId = data.id

        this.page.page = 1

        this.getList(this.page, {deptId: data.id})

      }

 

最后在分頁查詢的方法里面直接用searchForm就可以了

getList(page, params) {

        this.listLoading = true

        fetchList(Object.assign({

          current: page.currentPage,

          size: page.pageSize

        }, params, this.searchForm)).then(response => {

          this.list = response.data.data.records

          this.page.total = response.data.data.total

          this.listLoading = false

        })

      },

因為此時deptId已經放進去了

 

6.導出按鈕顯示：

excelBtn：true （並且加上兩個包）

 

7.對於click提示類的顯示

 this.$confirm('默認密碼是123456  是否繼續?', '提示', {

            confirmButtonText: '確定',

            cancelButtonText: '取消',

            closeOnClickModal: false,

            type: 'warning'

          })

 

最后的closeOnClickModal可以讓鼠標點擊其他位置的時候這個click框不去掉

8.包含空格的正則表達式

 const regBlank = /^[^ ]+$/

  if (!regBlank.test(value)) {

    callback(new Error("不能含有空格"))

    return

  }

 9.彈出框dialog中進行部門樹的下拉框的展示需求時候（展開一級）

（使用avue的自定義方法formslot=true）

<template slot="deptIdForm" slot-scope="scope">
                  <avue-input-tree
                    v-model="form.deptId"
                    :node-click="getNodeData"
                    :default-expanded-keys="idArr"
                     node-key="id"
                    :dic="treeDeptData"
                    :props="defaultDeptProps"
                    placeholder="請選擇所屬部門"
                  />

 

data里面寫

defaultDeptProps: {
        label: "name",
        value: "id"
      },

然后再加上

{
    label: '所屬部門',
    prop: 'deptId',
    formslot: true,
    slot: true,
    span: 12,
    hide: true,
    dataType:"number",
    rules: [{
      required: true,
      message: '請選擇部門',
      trigger: 'change'
    }]
  }

這里注意觸發類型要選change不然會出問題

后續學習繼續進行補充