最近在做的一個後臺管理 因為關於隱私原因 只方便展示個別頁面程式碼 不會上傳專案 注意是前端程式碼 我把專案程式碼地址放在最後了 如有需要可自取學習 我會為各位兄弟詳細的介紹其中各個屬性的含義和用法，記得三連，三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: 我有一篇部落格詳細講過 連結在這===》:visible.sync 去看吧
append-to-body:對話方塊中巢狀dialog
rules：表單驗證規則 就是表單驗證資訊
本篇文章程式碼使用若依進行二開。。
最後把程式碼地址放在這 有需要可以拿去學習學習
“二開程式碼片段”
收隊
//禁止轉載 轉載告我一聲 俺脾氣不小
