avue

一、crud 表格

1. 表格自带编辑 查看 新增 功能（可自定义）：

• 编辑：$refs.crud.rowEdit(row,index)
• 查看：$refs.crud.rowView(row,index)
• 新增：$refs.crud.rowAdd()

2.表格可用方法

• 行内删除： @row-del=“rowDel” rowDel(row){}

• 编辑 提交：@row-update=“rowUpdate” rowUpdate(row, index, done,){}

• 新增 保存： @row-save=“rowSave” rowSave(row, done, loading){}

• 筛选条件改变： @search-change=“searchChange” searchChange(params,done){}

• 清空筛选条件： @search-reset=“searchReset” searchReset(){}

• 表格多选 @selection-change=“selectionChange” selectionChange(list){}

• 上一页 下一页 ：@current-change=“currentChange” currentChange(currentPage){}

• 分页时，每页条数改变触发：@size-change=“sizeChange”

• 列表刷新：@refresh-change=“refreshChange”

• 加载列表：@on-load=“onLoad”

• 树结构表格懒加载： @tree-load=“treeLoad”

• 自带弹框打开之前触发函数：:before-open=“beforeOpen” beforOpen(done, type){}

• 自带弹框关闭之前触发函数：:before-close=“beforeClose” beforeClose(done, type){}

3.表格自定义行内操作栏按钮：

	slot="menu" 

 <template slot="menu"> 
     <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="handleDelete"
        >
            删 除
     </el-button>
 </template>

4.自定义表格外操作按钮：

​ slot=“menuLeft”

 <template slot="menuLeft">
     <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="handleDelete"
        >
            删 除
     </el-button>
 </template>

5.自定义列表显示：

	slot="bpmnStatus" 

<template slot-scope="{ row }" slot="bpmnStatus"> 
        <span v-if="row.bpmnStatus == 0" style="color: #4e5681">未申请</span>
        <span v-if="row.bpmnStatus == 1" style="color: #f26a06">审批中</span>
        <span v-if="row.bpmnStatus == 2" style="color: #00c975">审批通过</span>
 </template>

​ prop: “bpmnStatus”,

option:{
	column:[
         {
            label: "审批状态",
            overHidden: true,
            labelPosition: "top",
            prop: "bpmnStatus",
            type: "select",
            slot:"true", // 自定义插槽
            dicData: [
              {
                label: "未申请",
                value: 0
              },
              {
                label: "审批中",
                value: 1
              },
              {
                label: "审批完成",
                value: 2
              },
              { label: "已终止", value: 21 }
            ],
            rules: [
              {
                required: true,
                message: "审批状态",
                trigger: "blur"
              }
            ]
          },
    ]
}

6.自定义 表格弹框 表单显示：

​ slot=“bottomForm”

<template slot="bottomForm" slot-scope="scope">
        <el-button
          slot="bottom"
          type="text"
          size="small"
          q
          icon="el-icon-download"
          class="none-border"
          @click.stop="sst(scope.row)"
        >添加试题</el-button>
      </template>

​ prop: “bottom”,

option:{
	column:[
			{
            	label: "",
            	prop: "bottom",
            	overHidden: true,
            	labelPosition: "top",
            	hide: true,
            	span: 24,
            	viewDisplay: false,
            	size: "medium",
            	formslot: true //将自定义表单设置为true
            	//hide: true
          	},
        ]
}

7.表格常用公用属性（option）：

1. searchShow ：是否显示搜索栏（true/false）
2. searchShowBtn：搜索栏目折叠显隐按钮（true/false）
3. searchMenuPosition： 搜索操作按钮的位置（left/center/right）
4. refreshBtn：是否显示刷新按钮
5. columnBtn：表格右侧操作列显隐的按钮
6. selection: 是否可以多选
7. reserveSelection：多选 翻页后是否保留之前选中数据（selection：true时有效）
8. menu：表格是否有操作栏

8. 定义表格列显示样式（column）：

1. labelPosition：定义label位置（right/left/top）
2. labelWidth：定义label宽度
3. search：是否是搜索条件
4. searchLabelWidth：搜索栏 label宽度
5. display：表格弹出表单是否可见
6. disabled：表格弹出表单是否可编辑
7. hide：是否在列表中隐藏
8. overHidden：内容超出是否隐藏
9. dicMethod：字典请求方式（post/get）
10. dicUrl：远程字典路径
11. props：字典请求 返回参数回显字段{label：“回显内容字段”，value：“取值字段”}
12. span：栅列
13. slot：列自定义（插槽）
14. formslot：表单自定义
15. width：列宽度
16. change：值改变时触发 （{value,column}）=>{}

二、form 表单

1.自定义表单按钮

​ slot=“menuForm”

<avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
   <template slot-scope="scope" slot="menuForm">
      <el-button @click="tip">自定义按钮</el-button>
  </template>
</avue-form>