avue开发小结
【简介】
Avue 是一个采用Element框架低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率
github地址:https://github.com/nmxiaowei/avue
安装和引用参考官网,此处记录使用avue-crud组件开发的一些参数配置(欢迎补充)
本文参考原文链接:https://blog.csdn.net/u014635374/article/details/115357983
<avue-crud>
:option="option" // 表格配置属性
:table-loading="loading" // 表格等待框的控制,加载时转圈,true/false
:search.sync="search" // 搜索的变量(需要sync修饰符)
:visible.sync="changeInfo" // 是否显示 true/false
:data="data" // 表格显示数据
:page.sync="page" // 表格分页配置选项(需要sync修饰符)
:permission="permissionList" // 权限控制
:before-open="beforeOpen" // 打开前的回调function(file,column)
v-model="form" // 数据模型 用来存取页面的值
ref="crud" // 在普通DOM元素上使用,引用指向的就是DOM元素
@cell-click="pageto" // 表格点击运行方法onclick 方法定义
@row-update="rowUpdate"
@row-save="rowSave" // 新增数据点击运行方法 onclick方法定义
@row-del="rowDel" // 行数据删除时触发该事件
@row-click="handleRowClick" // 单击行运行的方法
@search-change="searchChange"
@search-rest="searchRest"
@selection-change="selectionChange"
@current-change="currentChange" // 点击页面会触发
@size-change="sizeChange" // 点击每页多少条会触发
@refresh-change="refreshChange" // 点击刷新按钮触发
@on-load="onLoad" > // 打开表格页的方法,一般用来初始化、返回页面数据
<template slot="status" slot-scope="scope">
<span v-show="scope.row.status == 1" class="label label-success">RUNNING</span>
<span v-show="scope.row.status != 1" class="label label-default">STOP</span>
</template>
<!-- 自定义搜索 -->
<template slot="search" slot-scope="scope">
<el-form-item lable="执行器" label-width="90px">
<el-select v-model="jpbGroup" placeholder="请选择执行器" @change="jobGroupChange">
<el-option
v-for="item in groupList"
:key="item.id"
:label="item.title"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
<!-- 自定按钮 表格顶部 -->
<template slot="menuLeft" slot-scope="scope">
<el-button type="primary" icon="el-icon-plus" size="small" plain @click.stop="handleAdd(scope.row)">心中</el-button>
</template>
<!-- 自定义按钮 表格操作栏 -->
<template slot="menu" slot-scope="scope">
<el-dropdown-item divided @click.native="handleDel(scope.row)">删除</el-dropdown-item>
</template>
<template slot="menuBtn" slot-scope="scope">
<el-dropdown-item divided @click.native="handleEdit(scope.row)">编辑</el-dropdown-item>
<el-dropdown-item divided @click.native="handleCopy(scope.row)">复制</el-dropdown-item>
<el-dropdown-item divided @click.native="handleStart(scope.row)">启动</el-dropdown-item>
</template>
<!-- 自定义表单项 -->
<template solot="wayForm" slot-scope="scope">
<el-input placeholder="请输入地址" v-model="form.way"/>
</template>
</avue-crud>
computed: {
...mapGetters(['permissions']),
permissionList() {
return {
addBtn: this.vaildData(this.permissions.metadata_mdrelation_add, false),
delBtn: this.vaildData(this.permissions.metadata_mdrelation_del, false),
editBtn: this.vaildData(this.permissions.metadata_mdrelation_edit, false),
menu: this.checkObj(this.is_show) // 是否显示menu菜单
};
}
}
const validateEmail = (rule, value, callback) => {
let isEmail(s) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
if (isEmail(value)) {
callback()
} else {
callback(new Error('请输入正确格式的邮箱'))
}
}
export const option = {
height: 'auto', // 表格高度
calcHeight: 20, // 表格高度差(主要用于减去其他部分让表格高度自适应)
tip: false,
searchShow: true, // 首次加载是否显示搜索
searchMenuSpan: 4, // 搜索按钮长度
searchSpan: 6, // 搜索框长度 最大长度24
border: true, // 表格边框是否显示
index: true, // 是否显示序号
indexLabel: '序号',
viewBtn: true, // 是否显示查看按钮
editBtn: true, // 是否显示编辑按钮
delBtn: false, // 是否显示删除按钮
excelBtn: false, // 是否显示表格导出按钮
labelWidth: 120, // 表格前面的标题长度
refreshBtn: false, // 表格上小刷新按钮
columnBtn: false, // 表格上小列表按钮
searchBtn: false, // 表格上小搜索按钮
selection: true, // 表格前面勾选
menu: true, // 是否显示操作栏
// 'menuType': 'menu', // 自定义表格操作栏
// 'menuBtnTitle': '操作', // 自定义表格操作栏按钮组的名称
menuWidth: 120, // 操作栏宽度
column: [
{
label: '所在地址',
props: 'way',
type: 'input', //输入框类型
align: 'center', // 对其方式
sortable: true, // 是否排序
border: true,
overHidden: true,
row: true,
width: 120,
span: 24, // 24最大长度
addDisplay: false, // 新增时是否显示
editDisplay: false, // 编辑时是否显示
viewDisplay: true, // 详情时是否显示
hide: true, // 表单查询时是否显示
display: false, // 在查看、新增、编辑页是否显示
dicData: [ // type是select时下拉数据
{label: '合肥', value: 1001},
{label: '成都', value: 1002}
],
dicUrl: '/xxl/jobgroup/pageList', // 通过接口查询搜索项
props: {label: 'title', value: 'id'}, // 选项配置
rules: [
{required: true, message:'请选择地址', trigger: 'blur'}
],
addDisabled: true, // 添加时不能修改
editDisabled: false, // 编辑时不能修改
sortable: true, // 排序方式切换、倒叙、正序切换
formatter: (row, column, cellValue, index) => {
return [row.startTime, row.endTime]
},
formslot: true, // 加一个插槽 子表可以放这里
append: '元', // type为input时生效
}, {
type: 'select',
label: '状态',
props: 'status',
search: true,
display: false,
value: 0,
dicData: [
{label: '全部', value: '-1'},
{label: '停止', value: '0'},
{label: '启动', value: '1'}
],
slot: true // 自定义表格列
}, {
label: '邮箱',
prop: 'email',
value: '',
span: 24,
rules: [
{
validator: validateEmail,
message: '请输入正确格式的邮箱',
trigger: 'blur'
},
{required: true, message: '请输入邮箱', trigger: 'blur'}
],
}
]
}
开发中可能还会存在的问题,待记录
- 级联选择
- 列数据之间控制显示