在使用vue(js)+elelment(ui)開發一些后臺管理項目的時候，基本會用到 列表頁，條件搜索(search),表格數據(table),分頁，操作欄的，增、刪、改、查幾種操作。如下圖這樣的：

很多的頁面都很類似，這里就給大家介紹一個，我自己最近研究的一個插件 avue-curd；整體的一個模塊，包含列表，增、刪、改、查；還可以通過slot插巣自定義局部組件內容

如下面，我按照產品自定義：隱藏了搜索模塊、操作欄（這些都是可配置的）

上代碼：主頁面

<!--列表--> <template><div class="execution"><basic-container><avue-crudref="crud"v-model="form":page="page":data="tableData":permission="permissionList":table-loading="tableLoading":option="tableOption"@on-load="getList"@refresh-change="refreshChange"@size-change="sizeChange"@current-change="currentChange"@row-update="handleUpdate"><template slot-scope="scope" slot="menu"><el-linkv-if="scope.row.status == -1"icon="el-icon-edit"type="primary"@click.stop="handleEdit(scope.row, scope.index)">審核</el-link></template><template slot="statusForm"><el-form-item style="margin-bottom: 0px"><el-radio-group@change="changeRequire"v-model="form.status"size="small"><el-radio border label="0">審核通過</el-radio><el-radio border label="-2">審核拒絕</el-radio></el-radio-group></el-form-item></template><template slot="status" slot-scope="scope"><span v-if="scope.row.status == 0" style="color: #67c23a">審核通過</span><span v-if="scope.row.status == -1" style="color: #409eff">待審核</span><span v-if="scope.row.status == -2" style="color: #f56c6c">審核拒絕</span></template></avue-crud></basic-container></div> </template><script> import { tenantPage, checkObj } from "@/api/admin/tenant"; import { tableOption } from "@/const/crud/admin/approval"; import { mapGetters } from "vuex";export default {name: "Tenant",data() {return {tableData: [],searchForm: {},form: {},page: {total: 0, // 總頁數currentPage: 1, // 當前頁數pageSize: 20, // 每頁顯示多少條},tableLoading: false,tableOption: tableOption,};},computed: {...mapGetters(["permissions"]),permissionList() {return {editBtn: this.vaildData(this.permissions.admin_systenant_edit, false),};},},methods: {handleEdit(row, index) {this.$refs.crud.rowEdit(row, index);},changeRequire(e) {if (e == "-2") {this.$refs.crud.formRules.rejectReason[0].required = true;} else {this.$refs.crud.formRules.rejectReason[0].required = false;}},getList(page, params) {this.tableLoading = true;tenantPage(Object.assign({current: page.currentPage,size: page.pageSize,},params,this.searchForm)).then((response) => {this.tableData = response.data.data.records;this.page.total = response.data.data.total;this.tableLoading = false;}).catch(() => {this.tableLoading = false;});},rowDel: function (row, index) {var _this = this;this.$confirm("是否確認刪除機構名稱為:" + row.name, "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(function () {return delObj(row.id);}).then((data) => {_this.$message.success("刪除成功");this.getList(this.page);});},// 編輯彈窗確定handleUpdate: function (row, index, done, loading) {console.log(123321);checkObj(row).then((data) => {this.$message.success("修改成功");done();this.getList(this.page);}).catch(() => {loading();});},searchChange(form, done) {this.searchForm = form;this.page.currentPage = 1;this.getList(this.page, form);done();},refreshChange() {this.getList(this.page);},sizeChange(pageSize) {this.page.pageSize = pageSize;},currentChange(current) {this.page.currentPage = current;},}, }; </script>

引用配置表格配置字段option

/** 列表表格數據字段信息*/ var validatePhone = (rule, value, callback) => {const reg = /^1[3|4|5|7|8|9][0-9]{9}$/;if (reg.test(value)) {callback();} else {callback(new Error("手機號格式不正確"));} }; var validateEmail = (rule, value, callback) => {const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if (reg.test(value)) {callback();} else {callback(new Error("郵箱格式不正確"));} }; var dicStatus = [{value: "0",label: "審核通過",type: "status_type",description: "審核通過"},{value: "-2",label: "審核拒絕",type: "status_type",description: "審核拒絕"},{value: "-1",label: "待審核",disabled: true,type: "status_type",description: "待審核"} ]; export const tableOption = {border: true,index: true,indexLabel: "序號",stripe: true,menuAlign: "center",align: "center",labelWidth: 120, // 彈出框表單lable寬度span: 24, // 彈出框表單項dialogWidth: 600, // 彈出框寬度addBtn: false, // 添加按鈕columnBtn: false, // 列顯隱按鈕delBtn: false, // 行內刪除按鈕refreshBtn: false, // 刷新按鈕editBtn: false, // 表格編輯按鈕editBtnText: "審核",editTitle: "租戶注冊審核",menuWidth: 150,// menu: false, // 隱藏菜單column: [{label: "ID",prop: "id",editDisabled: true,editDisplay: false,addDisplay: false},{label: "機構名稱",prop: "name",width: 200,editDisabled: true,rules: [{ required: true, message: "請輸入機構名稱", trigger: "blur" },{ min: 3, max: 32, message: "長度在 3 到 32 個字符", trigger: "blur" }]},{label: "租戶編號",prop: "code",editDisabled: true,editDisplay: false,addDisplay: false},{label: "聯系人賬號",prop: "contactUsername",width: 120,hide: true,editDisplay: false,addDisplay: false,rules: [{required: true,message: "請輸入聯系人",trigger: "blur"}]},{label: "聯系人姓名",prop: "contactRealName",width: 120,editDisabled: true,addDisplay: false,rules: [{required: true,message: "請輸入聯系人",trigger: "blur"}]},{label: "手機號",prop: "contactPhone",width: 150,editDisabled: true,addDisplay: false,rules: [{required: true,message: "請輸入手機號",trigger: "blur"},{validator: validatePhone,trigger: "blur"}],editDisabled: true},{label: "郵箱",prop: "contactEmail",width: 180,editDisabled: true,addDisplay: false,rules: [{required: true,message: "請輸入郵箱",trigger: "blur"},{validator: validateEmail,trigger: "blur"}]},{label: "審核狀態",prop: "status",type: "radio",border: true,dicData: dicStatus,addDisplay: false,formslot: true,typeslot: true,slot: true,rules: [{required: true,message: "請選擇審核狀態",trigger: "blur"}]},{label: "提交時間",prop: "createTime",width: 180,type: "datetime",format: "yyyy-MM-dd hh:mm:ss",valueFormat: "yyyy-MM-dd hh:mm:ss",rules: [{required: true,message: "請輸入創建時間",trigger: "blur"}],editDisabled: true,addDisplay: false,editDisplay: false},{label: "拒絕原因",prop: "rejectReason",editDisabled: false,addDisplay: false,hide: true,rules: [{required: false,message: "請輸入拒絕原因",trigger: "blur"}]}] };

具體的配置可以自己看avue-curd的文檔配置：https://www.bookstack.cn/read/avue-2.x/391487d752fdf241.md

官方文檔地址：https://avuejs.com/doc/crud/crud-doc

再結合solt的使用，你就可以實現以下，個性化的配置了。

<!----------------------------------------------------2020.12.15此處更新一處，crud里面自定義搜索項，本例子已狀態項status為例 ------------------------------->

需求是列表上方的狀態需要加個全部的選項，如下圖

如果直接修改數據源改成這樣的

var dicStatus = [{value: null,label: "全部",type: "status_type",description: "全部"},{value: "0",label: "正常",type: "status_type",description: "狀態正常"},{value: "9",label: "凍結",type: "status_type",description: "狀態凍結"} ];

新增或者編輯回顯的時候，就是出現尷尬的一幕，如下圖，不需要全部啊，

因為avue-crud里面，所有的封裝的參數項都是，同一出處；這里就需要搜索框自定義了，search: true,? searchslot: true, 代碼如下：

<avue-crudref="crud"v-model="form":page="page":data="tableData":permission="permissionList":table-loading="tableLoading":option="tableOption":search.sync="search" // 此處綁定搜索條件@on-load="getList"@search-change="searchChange"@refresh-change="refreshChange"@size-change="sizeChange"@current-change="currentChange"@row-update="handleUpdate"@row-save="handleSave"@row-del="rowDel"@sort-change="sortChange"><template slot="status" slot-scope="scope"><el-tag v-if="scope.row.status == 0">正常</el-tag><el-tag v-if="scope.row.status == 9" type="info">凍結</el-tag><el-tag v-if="scope.row.status == -1" type="warning">待審核</el-tag><el-tag v-if="scope.row.status == -2" type="danger">審核拒絕</el-tag></template> // 此處注意slot是 參數名字（status）+ Search<template slot="statusSearch" slot-scope="scope"><el-select v-model="search.status" placeholder="請選擇"><el-optionv-for="item in statusOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></avue-crud>// data()里面新增search,這是crud搜索條件的集合search: {},statusOptions: [{value: null,label: "全部",type: "status_type",description: "全部",},{value: "0",label: "正常",type: "status_type",description: "狀態正常",},{value: "9",label: "凍結",type: "status_type",description: "狀態凍結",},],

?

總結

以上是生活随笔為你收集整理的Avue-curd个性化定制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。