最详细的avue属性及使用详细介绍_xiaosi1413_avue

网络投稿 02-07 4921

avue属性及使用详细介绍

官方文档

<template>  <basic-container>  <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 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: { // 弹框文字提示 tip: false, // 边框 border: true, // 显示序号 index: true, // 序号标题 indexLabel: "序号", //打印按钮 printBtn: true // 刷新按钮 refreshBtn: true // 查看按钮 viewBtn: true, // 行内编辑按钮 editBtn: false, // 行内删除 delBtn: false, //首次加载是否显示搜索 searchShow: true, // selection: true, column: [ { label: "请假人", //匹配后端字段 prop: "userId", //输入框状态控制默认为input type: "tree", // 搜索栏目自定义内容同时控制页面显示隐藏 search: true, //表单编辑时是否禁止输入 editDisabled: true, //表单新增时是否禁止输入 addDisabled: true, //隐藏显示当前项 display: false, // 表单新增是可见 addDisplay: false, // 表单查看是否可见 viewDisplay: true, // 编辑按钮是否可见 editDisplay: false, // 隐藏列 hide: true, //选着多个 multiple: true, // 传入静态字典 dicData: [], // 字典参数 props 匹配后台字段 props: { value: "sysId", label: "name", }, //字典地址 dicUrl: "/api/blade-system/dict/dictionary?code=exam_state", //验证 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; this.selectionClear(); }); }, }, }; </script> <style> </style>