<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ## 刪除功能 1. 刪除分兩處,一處是表格頭部可以批量刪除的按鈕,一處是每一行末尾針對單條數據的刪除按鈕 ![](https://img.kancloud.cn/ff/c1/ffc1f05dd234a87d0c2b0604301acc43_2284x726.png) 2. 我們先來實現下簡單的單行刪除功能 * api增加remove方法 ~~~ import {getList, getDetail, submit, remove} from '@/api/demo/blog' ~~~ * 修改handleDelete方法 ~~~ handleDelete(index, row) { remove(row.id).then(res => { if (res.data.success) { this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }); console.log("delete"); console.log(index); console.log(row); }, ~~~ * 若需要增加確認框,可以修改為如下 ~~~ handleDelete(index, row) { this.$confirm("確定將選擇數據刪除?", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(() => { remove(row.id).then(res => { if (res.data.success) { this.onLoad(); this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }); }); console.log("delete"); console.log(index); console.log(row); }, ~~~ * 測試刪除,提示成功(因為使用了mock數據,所以列表數據不會有變化,下一節將會使用真實數據進行演示) ![](https://img.kancloud.cn/39/ee/39eef5527558670ed87c3d423d237cd9_2032x1030.png) ![](https://img.kancloud.cn/0a/c5/0ac50e473e04354f426b8aeb30a57617_2002x828.png) 3. 現在來實現下多行刪除的功能 * 增加computed,定義ids方法 ~~~ created() { this.onLoad(); }, computed: { ids() { let ids = []; this.multiSelection.forEach(ele => { ids.push(ele.id); }); return ids.join(","); } }, ~~~ * 修改handleMultiDelete方法 ~~~ handleMultiDelete() { console.log("multi-delete"); if (this.multiSelection.length === 0) { this.$message.warning("請選擇至少一條數據"); return; } this.$confirm("確定將選擇數據刪除?", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(() => { remove(this.ids).then(res => { if (res.data.success) { this.onLoad(); this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }); }); }, ~~~ * 測試刪除,提示成功(因為使用了mock數據,所以列表數據不會有變化,下一節將會使用真實數據進行演示) ![](https://img.kancloud.cn/26/09/260925cd954c012e2d5521c8f82caf90_1904x860.png) ![](https://img.kancloud.cn/3b/c1/3bc1ec47aec5a143567667d1797e1591_1884x942.png) ![](https://img.kancloud.cn/c3/82/c382fd03a371bc118dcb413517f85a3c_1776x786.png) * 最后放上完整代碼 ~~~ <template> <basic-container> <el-row> <el-col :span="24"> <div class="tool-box"> <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd">新增</el-button> <el-button type="danger" icon="el-icon-delete" size="small" @click="handleMultiDelete">批量刪除</el-button> </div> </el-col> </el-row> <el-row> <el-table :data="data" @selection-change="selectChange" style="width: 100%"> <el-table-column prop="id" type="selection" width="55"> </el-table-column> <el-table-column prop="title" label="標題" width="180"> </el-table-column> <el-table-column prop="content" label="內容"> </el-table-column> <el-table-column prop="time" label="日期" width="180"> </el-table-column> <el-table-column label="操作" fixed="right" width="250"> <template slot-scope="scope"> <el-button size="mini" type="" plain @click="handleView(scope.$index, scope.row)">查看 </el-button> <el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">編輯 </el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除 </el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-pagination background :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChange" @current-change="currentChange" :total="page.total"> </el-pagination> </el-row> <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="resetForm('blogForm')"> <el-form :model="blog" :rules="rules" ref="blogForm"> <el-form-item label="標題" prop="title" label-width="55px"> <el-input v-model="blog.title" autocomplete="off"></el-input> </el-form-item> <el-form-item label="時間" label-width="55px"> <el-date-picker v-model="blog.time" style="width: 100%;" type="date" value-format="yyyy-MM-dd" placeholder="選擇日期" autocomplete="off"> </el-date-picker> </el-form-item> <el-form-item label="內容" label-width="55px"> <el-input v-model="blog.content" autocomplete="off" type="textarea" :rows="5"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="formVisible = false">取 消</el-button> <el-button v-if="!viewMode" type="primary" @click="submitBlog('blogForm')">確 定</el-button> </div> </el-dialog> </basic-container> </template> <script> import {getList, getDetail, submit, remove} from '@/api/demo/blog' export default { data() { return { // 是否顯示 formVisible: false, // 是否查看 viewMode: false, // dialog標題 dialogTitle: '', // 列表數據 data: [], // 選中的數據 multiSelection: [], // 分頁數據 page: { pageSize: 10, currentPage: 1, total: 0 }, // 校驗規則 rules: { title: [ {required: true, message: '請輸入標題', trigger: 'blur'}, ] }, // 表單映射模型 blog: { id: '', title: '', content: '', time: '', } } }, created() { this.onLoad(); }, computed: { ids() { let ids = []; this.multiSelection.forEach(ele => { ids.push(ele.id); }); return ids.join(","); } }, methods: { onLoad() { getList().then(res => { this.data = res.data.data.records; this.page.total = res.data.data.total; }) }, selectChange(val) { this.multiSelection = val; console.log(this.multiSelection); }, currentChange(currentPage) { this.page.currentPage = currentPage; }, sizeChange(pageSize) { this.page.pageSize = pageSize; }, resetForm(formName) { this.$refs[formName].clearValidate() }, handleAdd() { this.dialogTitle = '新增博客'; this.formVisible = true; this.viewMode = false; console.log("add") }, handleView(index, row) { this.dialogTitle = '查看博客'; this.formVisible = true; this.viewMode = true; getDetail(row.id).then(res => { if (res.data.success) { this.blog = res.data.data; } }); console.log("view"); console.log(index); console.log(row); }, handleEdit(index, row) { this.dialogTitle = '修改博客'; this.formVisible = true; this.viewMode = false; getDetail(row.id).then(res => { if (res.data.success) { this.blog = res.data.data; } }); console.log("edit"); console.log(index); console.log(row); }, handleDelete(index, row) { this.$confirm("確定將選擇數據刪除?", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(() => { remove(row.id).then(res => { if (res.data.success) { this.onLoad(); this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }); }); console.log("delete"); console.log(index); console.log(row); }, handleMultiDelete() { console.log("multi-delete"); if (this.multiSelection.length === 0) { this.$message.warning("請選擇至少一條數據"); return; } this.$confirm("確定將選擇數據刪除?", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(() => { remove(this.ids).then(res => { if (res.data.success) { this.onLoad(); this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }); }); }, submitBlog(formName) { // 表單驗證 this.$refs[formName].validate((valid) => { if (valid) { console.log(this.blog); submit(this.blog).then(res => { if (res.data.success) { this.formVisible = false; this.$message({ type: 'success', message: '操作成功!' }) } else { this.$message({ type: 'error', message: res.data.msg }) } }) } }) }, } } </script> <style lang="scss" scoped> .el-pagination { margin-top: 20px; } </style> ~~~ ## 后記 * 基于ElementUI做的最簡單的CRUD模塊已經講解完畢,希望大家后續可以繼續深入研究,能夠使用原生ElementUI進行開發。 * 當然,我們有基于Element UI二次封裝的框架Avue,不僅封裝、簡化了很多模塊的操作,也100%兼容ElementUI,更是采用了Json驅動進行頁面模塊渲染,大大節約了前端構建的時間 * 下面一節,我們將學習Avue為我們帶來的極速開發效率,并且以一個前后端分離的模塊進行實戰講解
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看