Vue+elementUI 表格 增刪改查 純前端 最終版
阿新 • • 發佈：2021-06-24
<!-- 通訊錄頁 --> <template> <div class="page-item page-callrecords"> <div class="page-content" ref="pageTab"> <div class="page-tab"> <el-form :model="selectForm" ref="selectForm" label-width="80px" class="form"> <el-form-item label="姓名："class="form-item"> <el-input v-model="selectForm.name" placeholder="請輸入姓名"></el-input> </el-form-item> <el-form-item label="電話：" class="form-item"> <el-input v-model="selectForm.phone" placeholder="請輸入電話1或電話2"></el-input></el-form-item> <!-- <el-form-item label="分類" class="form-item"> <el-select v-model="form.classify" placeholder="選擇" class="form-item"> <el-option label="分類一" value="shanghai"></el-option> <el-option label="分類二" value="beijing"></el-option> </el-select> </el-form-item>--> <el-form-item> <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜尋</el-button> </el-form-item> <el-button type="primary" icon="el-icon-plus" class="form-btn" @click="onAddRow()">新增</el-button> </el-form> <!-- 表格試檢視 v-if="cutLayout"--> <el-table :data="tableDataList" style="width: 100%;" :max-height="tabHeight" border :header-cell-style="{ background: '#00abbe', color: '#fff' }" > <!-- <el-table-column type="selection" width="40"></el-table-column> --> <el-table-column prop="id" label="id" width="50" align="center"></el-table-column> <!-- <el-table-column style="color: #828282" align="center" prop="classify" label="分類"></el-table-column> --> <el-table-column align="center" prop="name" label="姓名"></el-table-column> <el-table-column align="center" prop="phone1" min-width="170" label="電話1"> </el-table-column> <el-table-column align="center" prop="phone2" min-width="170" label="電話2"> </el-table-column> <el-table-column align="center" prop="address" width="226" min-width="170" label="地址"> </el-table-column> <el-table-column align="center" prop="remark" label="備註"></el-table-column> <el-table-column align="center" label="操作" width="190"> <template slot-scope="scope"> <!-- size="small" --> <el-button size="mini" class="operation-btn" round @click="handleEdit(scope.$index, scope.row)" >編輯</el-button> <el-button size="mini" class="operation-btn operation-btn-delete" round type="danger" @click="handleDelete(scope.$index, scope.row )" >刪除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="5" layout="prev, pager, next, sizes, total, jumper" :total="total" ></el-pagination> </div> </div> <!-- 新增 編輯 視窗 --> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="width:1300px;" > <table> <tr> <td width="100px;"> </td> <td> <el-form :model="dialogForm" ref="dialogForm"> <el-form-item label="姓名：" class="form-item"> <el-input v-model="dialogForm.name" placeholder="請輸入姓名"></el-input> </el-form-item> <el-form-item label="電話1" class="form-item"> <el-input v-model="dialogForm.phone1" placeholder="請輸入電話1"></el-input> </el-form-item> <el-form-item label="電話2" class="form-item"> <el-input v-model="dialogForm.phone2" placeholder="請輸入電話2"></el-input> </el-form-item> <el-form-item label="地址" class="form-item"> <el-input v-model="dialogForm.address" placeholder="請輸入地址"></el-input> </el-form-item> <el-form-item label="備註" class="form-item"> <el-input v-model="dialogForm.remark" placeholder="請輸入備註"></el-input> </el-form-item> </el-form> <div> <el-button @click="dialogCancel()">取消</el-button> <el-button type="primary" v-on:click="dialogSave()" :loading="addLoading" >儲存</el-button> </div> </td> </tr> </table> </el-dialog> </div> </template> <script> //import { mapState } from 'vuex' var _index; //定義一個全域性變數，以獲取行資料的行號 export default { name: '', components: {}, props: {}, data() { return { dialogTitle:'',//對話方塊標題 dialogVisible: false,//是否顯示新增視窗 dialogForm: [],//對話方塊中的form 新增和編輯 pageCurrentNum:'',//當前頁碼 addLoading: false, selectForm: { //查詢條件的form name: '', phone: '', classify: '' }, tableData: [ { id: '100', classify: '分類一', name: '劉加料', phone1: '1381111111', phone2: '12877777', address: '中國', remark: '備註2', operation: '' }, { id: '101', classify: '分類二', name: '王國為', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註1', operation: '' }, { id: '102', classify: '分類一', name: '劉轔中', phone1: '1392274422', phone2: '12887777788', address: '中國', remark: '備註1', operation: '' }, { id: '103', classify: '分類二', name: '劉珍從', phone1: '13922456562', phone2: '12883534888', address: '中國', remark: '備註3', operation: '' }, { id: '104', classify: '分類二', name: '李國為', phone1: '1392234222', phone2: '1282348888', address: '中國', remark: '備註1', operation: '' }, { id: '105', classify: '分類一', name: '王五中', phone1: '1392226786722', phone2: '109834588', address: '中國', remark: '備註1', operation: '' }, { id: '106', classify: '分類二', name: '賀煒潔', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註3', operation: '' }, { id: '107', classify: '分類一', name: '劉加料', phone1: '1381111111', phone2: '12877777', address: '中國', remark: '備註2', operation: '' }, { id: '108', classify: '分類二', name: '王標準', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註1', operation: '' }, { id: '109', classify: '分類一', name: '劉宵廳', phone1: '1392112422', phone2: '1288327788', address: '中國', remark: '備註1', operation: '' }, { id: '110', classify: '分類二', name: '劉材料', phone1: '139786456562', phone2: '122344888', address: '中國', remark: '備註3', operation: '' }, { id: '111', classify: '分類二', name: '李傑傑', phone1: '139223422', phone2: '128234823288', address: '中國', remark: '備註1', operation: '' }, { id: '112', classify: '分類一', name: '王為要', phone1: '1392222346722', phone2: '102334588', address: '中國', remark: '備註1', operation: '' }, { id: '113', classify: '分類二', name: '賀炒菜', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註3', operation: '' }, { id: '114', classify: '分類一', name: '劉加料', phone1: '1381111111', phone2: '12877777', address: '中國', remark: '備註2', operation: '' }, { id: '115', classify: '分類二', name: '王國為', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註1', operation: '' }, { id: '116', classify: '分類一', name: '王口水', phone1: '1392274422', phone2: '12887777788', address: '中國', remark: '備註1', operation: '' }, { id: '117', classify: '分類二', name: '劉中斷', phone1: '13922456562', phone2: '12883534888', address: '中國', remark: '備註3', operation: '' }, { id: '118', classify: '分類二', name: '張燈具', phone1: '1392234222', phone2: '1282348888', address: '中國', remark: '備註1', operation: '' }, { id: '119', classify: '分類一', name: '張材要', phone1: '1392226786722', phone2: '109834588', address: '中國', remark: '備註1', operation: '' }, { id: '120', classify: '分類二', name: '王可數', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註3', operation: '' }, { id: '121', classify: '分類一', name: '李尖鑿', phone1: '1381111111', phone2: '12877777', address: '中國', remark: '備註2', operation: '' }, { id: '122', classify: '分類二', name: '王頂替', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註1', operation: '' }, { id: '123', classify: '分類一', name: '趙酒店', phone1: '1392112422', phone2: '1288327788', address: '中國', remark: '備註1', operation: '' }, { id: '124', classify: '分類二', name: '王燈光', phone1: '139786456562', phone2: '122344888', address: '中國', remark: '備註3', operation: '' }, { id: '125', classify: '分類二', name: '劉耬傑', phone1: '139223422', phone2: '128234823288', address: '中國', remark: '備註1', operation: '' }, { id: '126', classify: '分類一', name: '李安', phone1: '1392222346722', phone2: '102334588', address: '中國', remark: '備註1', operation: '' }, { id: '127', classify: '分類二', name: '王為菜', phone1: '1392222222', phone2: '12888888888', address: '中國', remark: '備註3', operation: '' } ], tableDataList: [], tableDataSelect: [], currentPage4: 1, tabHeight: 1080, total: 20, pagetRowNum: 5,//每頁顯示的行數 //cutLayout: false, } }, computed: { //...mapState(['tableDataAllPage']) }, watch: {}, beforeCreate() {}, beforeUpdate() { this.tabHeight = this.$refs.pageTab.offsetHeight - 137 }, beforeMount() {}, mounted() { let _this = this window.onresize = function() { if (_this.$refs.pageTab) { _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137 } } this.ListLoadData();//初始化列表 }, methods: { handleSizeChange(val) { //每頁顯示條數 變化事件 console.log(`每頁的行數 ${val} 條`) this.pagetRowNum= val; this.ListLoadData();//改變每頁的行數則 重新計算列表 }, handleCurrentChange(val) { //頁碼 變化事件 console.log(`當前頁: ${val-1}`) this.tableDataList = this.tableDataAllPage[val-1].list; this.pageCurrentNum=val;//當前頁碼 }, //初始化 列表資料 ListLoadData(){ //-------獲取 列表資料 -------Sina API--Axios跨域 Get請求-------------------------------- var dataLength=0; dataLength=this.tableData.length; console.log( "總行數: "+this.tableData.length + " " +dataLength ); /* 分頁演算法 */ this.tableDataAllPage=[]; this.total=dataLength;//總行數 var pageCount=Math.ceil(dataLength/this.pagetRowNum);//頁數=總行數/每頁的行數 console.log( "頁數: "+pageCount ); //遍歷所有的分組 var i=0; var y=0 for(var x=1;x<=pageCount;x++){ var tabData={"list":[]}; //console.log("第 "+x+"頁---------------------------------------------"); for(y;y<dataLength;y++){//for(var y in response.data){ //console.log("插入資料: "+ y ); var objList={"id":this.tableData[y].id,"classify":this.tableData[y].classify ,"name":this.tableData[y].name ,"phone1":this.tableData[y].phone1,"phone2":this.tableData[y].phone2 ,"address":this.tableData[y].address,"remark":this.tableData[y].remark ,"operation":this.tableData[y].operation }; tabData.list.push(objList); //console.log("插入資料: "+response.data[y].userID+" "+response.data[y].userName+" "+response.data[y].userExten+""); i++; if(i>=x*this.pagetRowNum){//當數頁碼 * 每頁的行數 //console.log("當數頁碼: "+ i +" " + x*this.pagetRowNum ); y++;//加一 break; } } this.tableDataAllPage.push(tabData); } this.tableDataList = this.tableDataAllPage[0].list; //-------------------------------------------------------------- }, //查詢 onSelect() { console.log('onSelect 查詢 ' + this.selectForm.name +" " + this.selectForm.phone); var url = 'http://192.168.1.75:5011/httpCli?action=query'+"&name="+this.selectForm.name+"&phone="+this.selectForm.phone ; this.$http.get(url).then((data) => { console.log(data) //this.tableform = data.body; }).catch((err) => { console.log(err) }) /* this.tableDataSelect=this.tableData; var i=0;var len=this.tableData.length; for(i;i<len;i++){ if(this.selectForm.name!=""){ if(this.selectForm.name!=this.tableData[i].name){ console.log('onSelect name去除 ' + i +" " + this.tableData[i].name); this.tableData.splice(i, 1); } } if(this.selectForm.phone!=""){ if(this.selectForm.phone!=this.tableData[i].phone1){ this.tableData.splice(i, 1); console.log('onSelect phone1去除 ' + i +" " + this.tableData[i].phone1); } } }*/ }, //新增資料 onAddRow() { _index=-1;//-1為新增 this.dialogTitle='新增'; this.dialogVisible = true; this.dialogForm = { name: '', phone1: '', phone2: '', address: '', remark: '' } }, //編輯資料-------------------------------------------------------- handleEdit(index, row) { console.log("handleEdit index:"+index+" name:"+row.name); this.dialogTitle='編輯'; this.dialogVisible = true; this.dialogForm = Object.assign({}, row); _index = index;//用於判斷是新增還是編輯 //取到這一欄的值，也就是明白是在那一欄進行操作，從而將編輯後的資料存到表格中 }, //取消按扭 dialogCancel() { this.dialogVisible = false;//對話方塊 不顯示 }, //對話方塊 儲存按鈕 dialogSave(){ if(_index==-1){ this.sumbitAddRow(); //儲存 新增 }else{ this.sumbitEditRow();//儲存 編輯 } }, //將新增的資料新增到表格中 sumbitAddRow() { console.log( "name: "+ this.dialogForm.name); var new_id=this.tableData[this.tableData.length-1].id; new_id= parseInt(new_id) + 1;//id 自動加 1 console.log( "new_id "+ new_id); this.tableform = this.tableform || [] this.tableData.push({ id: new_id, name: this.dialogForm.name, phone1: this.dialogForm.phone1, phone2: this.dialogForm.phone2, address: this.dialogForm.address, remark: this.dialogForm.remark, }) //storage.set('url', this.url); this.ListLoadData();//重新載入 資料 this.handleCurrentChange(this.tableDataAllPage.length);//頁碼變化事件 跳到最後一頁 this.dialogVisible = false;//對話方塊 不顯示 }, //儲存編輯 sumbitEditRow() { console.log("sumbitEditRow _index:"+_index+" name:"+this.dialogForm.name); this.dialogVisible = false;//對話方塊 不顯示 //更新當前列表的行內容 var editData_index = _index;//當前頁的行號 this.tableDataList[editData_index].name = this.dialogForm.name; this.tableDataList[editData_index].phone1 = this.dialogForm.phone1; this.tableDataList[editData_index].phone2 = this.dialogForm.phone2; this.tableDataList[editData_index].address = this.dialogForm.address; this.tableDataList[editData_index].remark = this.dialogForm.remark; //同步更新 原始資料 var edit_id=this.tableDataList[editData_index].id; var i=0; for(i;i<this.tableData.length;i++){ //console.log("遍歷資料: "+ this.tableData[i].name ); if(this.tableData[i].id==edit_id){ this.tableData[i].name = this.dialogForm.name; this.tableData[i].phone1 = this.dialogForm.phone1; this.tableData[i].phone2 = this.dialogForm.phone2; this.tableData[i].address = this.dialogForm.address; this.tableData[i].remark = this.dialogForm.remark; } } // }, //刪除資料------------------------------------------------- handleDelete(index, row) { console.log("handleDelete index:"+index+" name:"+row.name); this.$confirm('確認要刪除該資料, 是否繼續?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(() => { //刪除 //第一步 取這個 id 所在的 行號 var i=0;var del_index=-1; for(i;i<this.tableData.length;i++){ //console.log("遍歷資料: "+ this.tableData[i].name ); if(this.tableData[i].id==row.id){ del_index=i; } } console.log( "刪除前 總行數: "+this.tableData.length + " " ); this.tableData.splice(del_index, 1); console.log( "刪除後 總行數: "+this.tableData.length + " " ); this.ListLoadData();//重新載入 資料 //console.log( "當前頁: "+this.pageCurrentNum + " " ); this.handleCurrentChange(this.pageCurrentNum);//跳轉至 當前頁 this.$message({ type: 'success', message: '刪除成功!', }); }).catch((err) => { if(err!='cancel'){ this.$message({ type: 'error', message: '刪除失敗! '+ err }); } }) }, //--------------------------------------------------------------- } } </script> <style lang="scss"> @import './AddressGridView.scss'; </style>