avue

Sijia3048

已于 2022-04-27 08:48:16 修改

阅读量2.3k

点赞数 3

文章标签：前端框架

于 2022-04-26 09:34:32 首次发布

本文链接：https://blog.csdn.net/Sijia3048/article/details/124420148

版权

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）：

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

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

labelPosition：定义label位置（right/left/top）
labelWidth：定义label宽度
search：是否是搜索条件
searchLabelWidth：搜索栏 label宽度
display：表格弹出表单是否可见
disabled：表格弹出表单是否可编辑
hide：是否在列表中隐藏
overHidden：内容超出是否隐藏
dicMethod：字典请求方式（post/get）
dicUrl：远程字典路径
props：字典请求返回参数回显字段{label：“回显内容字段”，value：“取值字段”}
span：栅列
slot：列自定义（插槽）
formslot：表单自定义
width：列宽度
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>