最详细的avue属性及使用详细介绍
avue属性及使用详细介绍官方文档<template><!-- 基础组件 --><basic-container><!-- <el-button @click='exportHandle'>导出</el-button> --><avue-crud设置表格属性:option="option"用来存取页面的值v-model=
·
avue属性及使用详细介绍
<template>
<!-- 基础组件 -->
<basic-container>
<!-- <el-button @click='exportHandle'>导出</el-button> -->
<avue-crud
设置表格属性
:option="option"
用来存取页面的值
v-model="form"
获取后台数据
:data="data"
:table-loading="loading"
分页
:page="page"
权限控制 操作按钮动态显示
:permission="permissionList"
打开前回调
:before-open="beforeOpen"
关闭前回调
:before-close="beforeClose"
获取dom 结构
ref="crud"
数据编辑后出发
@row-update="rowUpdate"
新增数据确定后执行
@row-save="rowSave"
行删除
@row-del="rowDel"
点击搜索后触发该事件
@search-change="searchChange"
清空搜索回调方法
@search-reset="searchReset"
当选择项发生变化时会触发该事件
@selection-change="selectionChange"
@current-change="currentChange"
点击每页多少条
@size-change="sizeChange"
点击刷新
@refresh-change="onLoad(page)"
初始化页面
@on-load="onLoad"
>
自定义按钮
<template slot-scope="scope" slot="menu">
<el-button @click="submitHandle(scope.row)">提交</el-button >
</template>
<template slot-scope="{ row }" slot="status">
更改表格内容
<el-tag v-if="row.status == 0">待审</el-tag>
<el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>
</template>
</avue-crud>
</basic-container>
</template>
<script>
export default {
data() {
return {
form: {},
type: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
//列的对其方式
align:'left',
//表格宽度
width: '100%',
//表格高度差(主要用于减去其他部分让表格高度自适应)
calcHeight: 'auto',
//表格高度
height: 'auto',
//表格最大高度
maxHeight: 'auto',
// 弹框文字提示
tip: false,
// 边框
border: true,
// 显示序号
index: true,
// 序号标题
indexLabel: "序号",
//打印按钮
printBtn: true
// 刷新按钮
refreshBtn: true
// 查看按钮
viewBtn: true,
// 行内编辑按钮
editBtn: false,
// 行内删除
delBtn: false,
//首次加载是否显示搜索
searchShow: true,
editBtnText:'编辑文案',
viewBtnText:'查看文案',
printBtnText:'打印文案',
excelBtnText:'导出文案',
updateBtnText:'修改文案',
saveBtnText:'保存文案',
cancelBtnText:'取消文案',
//弹框宽度控制
dialogWidth: 600,
column: [
{
label: "请假人",
//匹配后端字段
prop: "userId",
//输入框状态控制 默认为input
type: "tree",
//type:input/input/select/radio/checkbox/textarea/cascader/date/time/datetime
/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree/number
maxRows:4,//最大行(当type为textarea,当number时最大值)
minRows:2,//最小行(当type为textarea,当number时最小值)
// 搜索栏目自定义内容 同时控制页面显示隐藏
search: true,
//表单编辑时是否禁止输入
editDisabled: true,
//表单新增时是否禁止输入
addDisabled: true,
//隐藏显示当前项
display: false,
// 表单新增是可见
addDisplay: false,
// 表单查看是否可见
viewDisplay: true,
// 编辑按钮是否可见
editDisplay: false,
// 隐藏列
hide: true,
//选着多个 当type为tree生效
multiple: true,
// 传入静态字典
dicData: [],
// 字典参数 props 匹配后台字段
props: {
value: "sysId",
label: "name",
},
//字典地址
dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",
//时间格式
format: "yyyy-MM-dd hh:mm:ss",
valueFormat: "yyyy-MM-dd hh:mm:ss",
//验证
rules: [
{
required: true,
message: "请选择请假人",
trigger: "blur",
},
],
},
data: []
};
},
mounted() {
// 当字典数据需要前端转换时 获取请假人id 通过接口 添加字典数据
personnel(1, 10000, {
is_deleted: 0,
}).then((res) => {
this.option.column.forEach((item) => {
if (item.prop == "userId") {
item.dicData = res.data.data.records;
}
});
});
},
methods: {
onLoad(page, params = {}) {
this.loading = true
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
//渲染数据
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
});
},
},
};
</script>
<style>
</style>
更多推荐
所有评论(0)