1、基本属性
<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"></avue-crud></basic-container>
</template>
2、自定义列表
<avue-crud :data="data" :option="option" ref="crud"><!-- 左边插槽 --><template slot-scope="scope" slot="menuLeft"><el-button type="danger" @click="$refs.crud.rowAdd()">新增</el-button></template><!-- 右边插槽 --><template slot-scope="scope" slot="menuRight"><el-button type="danger" @click=() => {}">刷新</el-button></template><!-- 自定义行内操作栏插槽 --><template slot-scope="{row,index}" slot="menu"><el-button @click="$refs.crud.rowEdit(row,index)">编辑</el-button><el-button @click="$refs.crud.rowDel(row,index)">删除</el-button></template><!-- 自定义弹窗内按钮插槽 --><template slot-scope="{row,index,type}" slot="menuForm"><el-button v-if="type=='add'" @click="$refs.crud.rowSave()">自定义新增</el-button><el-button v-if="type=='edit'" @click="$refs.crud.rowUpdate()>自定义修改</el-button><el-button @click="$refs.crud.closeDialog()">取消</el-button></template><!-- 自定义表单插槽，slot="propForm" --><template slot-scope="{type,disabled}" slot="nameForm"> // column: [{prop:'name',formslot:true}]<el-tag v-if="type=='add'">新增</el-tag><el-tag v-else-if="type=='edit'">修改</el-tag><el-tag v-else-if="type=='view'">查看</el-tag><el-tag>{{user.name?user.name:'暂时没有内容'}}</el-tag><el-input :disabled="disabled" v-model="user.name"></el-input></template><!-- 自定义表单错误提示插槽，slot="propError" --><template slot-scope="{error}" slot="nameError"> // column: [{prop:'name',labelslot:true}]<p style="color:green">自定义提示{{error}}</p></template><!-- 自定义表单标题，slot="propLabel" --><template slot-scope="scope" slot="nameLabel"> // column: [{prop:'name',errorslot:true}]<span>姓名 </span><el-tooltip class="item" effect="dark" content="文字提示" placement="top-start"><i class="el-icon-warning"></i></el-tooltip></template><!-- 向搜索表单插入一个额外的（column中没有的字段）输入框 --><template slot="search"><el-form-item label="状态"><el-input placeholder="状态" v-model="search.value"/></el-form-item></template><!-- 向表单中插入一个额外的输入框 --><template slot="menuForm"><el-form-item label="维修"><el-input placeholder="维修" v-model="search.value"/></el-form-item></template>
</avue-crud>
3、定义初始数据
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",//输入框状态控制 默认为inputtype: "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: []
4、方法中使用方法
methods: {rowSave(row, done, loading) {add(row).then(() => {done();this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});}, error => {window.console.log(error);loading();});},rowUpdate(row, index, done, loading) {update(row).then(() => {done();this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});}, error => {window.console.log(error);loading();});},rowDel(row) {this.$confirm("确定将选择数据删除?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {return remove(row.id);}).then(() => {this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});});},handleDelete() {if (this.selectionList.length === 0) {this.$message.warning("请选择至少一条数据");return;}this.$confirm("确定将选择数据删除?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {return remove(this.ids);}).then(() => {this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});this.$refs.crud.toggleSelection();});},beforeOpen(done, type) {if (["edit", "view"].includes(type)) {getDetail(this.form.id).then(res => {this.form = res.data.data;});}done();},searchReset() {this.query = {};this.onLoad(this.page);},searchChange(params, done) {if (params.dispatchDate) {console.log(params.dispatchDate, '################');let date = new Date(params.dispatchDate)date.setDate(date.getDate())console.log(date.toISOString().split('T')[0]); // 输出结果为 "2023-10-20"let startTimes = date.toISOString().split('T')[0]params.weekdate = startTimesparams.yearOfOperation = startTimes.substring(0, 4)delete params.dispatchDate;}this.query = params;this.page.currentPage = 1;this.onLoad(this.page, params);done();},selectionChange(list) {this.selectionList = list;},selectionClear() {this.selectionList = [];this.$refs.crud.toggleSelection();},currentChange(currentPage) {this.page.currentPage = currentPage;},sizeChange(pageSize) {this.page.pageSize = pageSize;},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;for (let i = 0; i < this.data.length; i++) {const lv = this.data[i]lv.riskAnalysisCompletionRate = lv.riskAnalysisCompletionRate + '%'lv.hazardRectificationRate = lv.hazardRectificationRate + '%'lv.completionRateOfTroubleshootingTasks = lv.completionRateOfTroubleshootingTasks + '%'}this.loading = false;this.selectionClear();});}}
)
