关于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不然会出问题

后续学习继续进行补充