最详细的avue属性及使用详细介绍
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: { //列的对其方式 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, // selection: true, 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/numbermaxRows: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", //验证 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>