最近在做的一個後臺管理 因為關於隱私原因 只方便展示個別頁面程式碼 不會上傳專案 注意是前端程式碼 我把專案程式碼地址放在最後了 如有需要可自取學習 我會為各位兄弟詳細的介紹其中各個屬性的含義和用法，記得三連，三Q兒了 //
效果圖：
實現效果為右側紅框
包括頭部導航搜尋和重置按鈕，新增、修改、批量刪除和匯出 下面是表格資料 底部翻頁
首先是頭部搜尋導航
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px"> <el-form-item label="測試3" prop="postCode"> <el-input v-model="queryParams.postCode" placeholder="輸入測試3..." clearable size="small" @keyup.enter.native="handleQuery" ></el-input> </el-form-item> <el-form-item label="測試崗位" prop="postName"> <el-input v-model="queryParams.postName" placeholder="請輸入測試崗位。。。。" clearable size="small" @keyup.enter.native="handleQuery" ></el-input> </el-form-item> <el-form-item label="選擇" prop="status"> <el-select v-model="queryParams.status" placeholder="選擇test" clearable size="small"> <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜尋</el-button> <el-button type="success" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> </el-form-item> </el-form>
這是一個el-form表單
ref:用來給dom元素或子元件註冊引用資訊，如果想要進行操作dom，需要先進行ref註冊屬性
:inline:官方解釋為行內表單模式，也叫內聯，在一個文字行內生成元素框，而不會打斷這行文字
v-show：可以動態的顯示dom元素 這裡提一下v-ifv-show和v-if都是dom渲染 都可以動態的顯示dom元素 不同的是 v-show在任何情況下都會先進行渲染 然後再進行判斷條件是否為true，若不為true則被快取 但dom元素保留，而v-if是先進行判斷再編譯。適用場景當然也不同 v-show適合頻繁切換 v-if反之
label-width：表單域標籤的寬度 例如50px ，那麼form表單的直接子元素form-item就會進行繼承，這裡會出現像margin:50px的效果
clearable: 表示是否可清空，屬於編輯功能 輸入框右側會出現一個清除符號
@keyup.enter.native: 回車事件，vue監聽鍵盤迴車事件，當回車(Enter)時 觸發監聽事件進行操作，在自定義元件繫結原生事件時 例如element ui 內 就要使用.native修飾符，vue還特別貼心的用了enter來作為別名 很贊
<el-select> <el-option/> </el-select>: 不用多說了 相信都用過，下拉框 下拉選擇
el-button:按鈕 這個就不說了
下面是新增、修改、批量刪除
<el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" >刪除 </el-button> </el-col> <!--當增加這個right-toolbar時 我的form表單就無法點選也無法使用--> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row>
:gutter:柵格佈局間隔距離
:span:柵格佔據的列數，element柵格佈局基礎分為24欄
:disabled:是否禁用 single 單一 multiple 多個
right-toolbar：form無法點選也無法使用、
plain：當滑鼠劃過或者點選時 按鈕背景顏色會變深色
table表格
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="60" align="center"/> <el-table-column label="測試2" align="center" prop="postId"/> <el-table-column label="測試3" align="center" prop="postCode"/> <el-table-column label="測試崗位" align="center" prop="postName"/> <el-table-column label="測試順序" align="center" prop="postSort"/> <el-table-column label="測試6" align="center" prop="status" :formatter="statusFormat"/> <el-table-column label="測試7" align="center" prop="createTime"> <!-- 日期格式 parseTime格式 進行解析時間--> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <!-- 帶資料的插槽 slot-scope --> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改 </el-button> <el-button size="mini" style="color:#ff0000" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >刪除 </el-button> </template> </el-table-column> </el-table>
v-loading:顯示載入中，在介面請求到資料之前，顯示載入中，直到請求到資料後消失
@selection-change：el-table使用多選框時，當選項發生變化時觸發該事件 表格左側有勾選框，當勾選全選時，selection-change觸發操作
:data:顯示的資料
分頁
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
分頁元件 total：總條數
pagesize：每頁顯示資料條數
dialog彈出框
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form-item label="測試崗位" prop="postName"> <el-input v-model="form.postName" placeholder="測試....."/> </el-form-item> <el-form-item label="測試2" prop="postCode"> <el-input v-model="form.postCode" placeholder="測試........"/> </el-form-item> <!--順序--> <el-form-item label="測試5" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue" >{{dict.dictLabel}} </el-radio> </el-radio-group> </el-form-item> <el-form-item label="測試順序" prop="postSort"> <el-input-number v-model="form.postSort" controls-position="right" :min="0"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">確定</el-button> <el-button @click="cancel">取消</el-button> </div> </el-dialog>
title:彈框標題
:visible: 我有一篇部落格詳細講過 連結在這===》 去看吧
append-to-body:對話方塊中巢狀dialog
rules：表單驗證規則 就是表單驗證資訊
本篇文章程式碼使用若依進行二開。。
最後把程式碼地址放在這 有需要可以拿去學習學習
“二開程式碼片段”
收隊
//禁止轉載 轉載告我一聲 俺脾氣不小
