新手，目前在寫用戶統計頁面，用到了element-ui，該頁面有增刪改查功能，添加、編輯、洗掉等頁面是和主頁面寫一起好還是分開寫在主頁面參考好？網上看到有用 section 標簽和 el-dialog 標簽 將增傷改查頁面寫在一起，也有分開寫的，用到modal標簽。
寫一起：
查詢
<el-button type=“primary” @click=“handleAdd”>新增
<!--串列-->
<el-table :data="https://bbs.csdn.net/topics/users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年齡" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="120" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" min-width="180" sortable>
</el-table-column>
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">洗掉</el-button>
</template>
</el-table-column>
</el-table>
<!--工具條-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量洗掉</el-button>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
</el-pagination>
</el-col>
<!--編輯界面-->
<el-dialog title="編輯" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年齡">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="選擇日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-radio-group v-model="addForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年齡">
<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="選擇日期" v-model="addForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="addForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
分開寫：
<Modal v-model=“v”
@on-cancel=“closeDialog”>
添加一個角色
<Button type=“info” size=“large” long @click=“confirm()”>確認
uj5u.com熱心網友回復：
肯定分開寫啊，一個組件負責一個模塊。。uj5u.com熱心網友回復：
和用戶沒關系。我們在談代碼設計不是需求，需求都定好的。用戶操作都一樣的uj5u.com熱心網友回復：
只有我建議合起來寫嗎……我的考慮出發點是這樣用戶操作起來方便。對于大部分簡單資料，原地編輯就可以了，而分成只讀視圖和編輯視圖總有種脫褲子XX的感覺。uj5u.com熱心網友回復：
這個沒有標準答案，如果是我會選擇每個操作dialog寫單獨的vue檔案，需要的時候再把組件import進來，如果有規范命名的話專案結構會很清晰，方便后期維護和多頁面復用uj5u.com熱心網友回復：
其實這個問題我本身也考慮過，能有個全域組件，在點擊按鈕的時候觸發加載一個組件的彈框，這樣父組件就會很簡單，不用在模版中對相應的組件進行宣告。這樣也更加簡潔。但是后來有思考了很多，其實這樣會有一個毛病，讓以后的人不能一眼看明白是怎么回事。而且這樣dom相當于是后來生成的了。和vue資料驅動視圖的思想有些背離。直接宣告式參考一下，然后資料驅動來控制它的狀態比較容易理解。不過缺點也還是有的，每次加載一個組件會同時加載別的，費流量一些。具體哪種模式可能要看需求了，再深入的分析可能要大神來聊聊看了uj5u.com熱心網友回復：
分開寫，邏輯耦合度低，開發復雜度低，用戶操作量多；合起來寫則反之。看你的取舍。uj5u.com熱心網友回復：
比較推薦分開寫，然后引入進來的方式。因為一個編輯或者新增里面還會有自己的校驗等等js操作。全部放一個組件里面會比較多。而且通過引入的方式，其實你還是需要把組件宣告的當前模版中，并不會導致讀起來很費勁。后面維護的人一眼也是能看懂的。當然，有個缺點是，有些事情，本來一個組件中完成的事情，現在需要父子通信來完成了，不過代碼命名規范的話，還是能接受的。uj5u.com熱心網友回復：
我有些迷惑。現在討論的問題是不是「增刪改邏輯和查邏輯是否應該寫在同一個組件里」這個問題？如果是的話，寫在同一個組件的好處是，用戶加載到頁面之后所有可能需要的功能都是 ready 的，可以實作「原地編輯」的效果。分開寫，用戶就需要多一個「進入編輯模式」的操作。
uj5u.com熱心網友回復：
如果現在還有翻到這里的朋友們，給你們說一下我的方法，比如有個用戶模塊(/User),這個路由默認進去是串列,點擊新增的話跳轉路由到新的頁面(/User/add)，編輯同理，只不過比添加多了一步，叫做資料回顯(所以路由規則應該是/User/edit/12 ，利用路由傳參獲取ID即可，因為單條資料而已)。洗掉直接在本頁面操作（來一個問候，防止誤刪） 即可然后一定要注意命名規范，User模塊檔案夾下面有userAdd，useredit(只有這兩個就夠了)
這個是我學習后端服務端渲染的手法。 如果還有更高深的理解，和手法，歡迎探討
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/133150.html
標籤：其他技術討論專區
上一篇：請問ADO能否跟QT混合使用呢
下一篇：讀Google的三大論文有感