本文實例為大家分享了vue element實現表格增加刪除修改數據的具體代碼，供大家參考，具體內容如下

這里用到是設置一個彈出框來實現此功能，還有一種方法是直接在原來的基礎上面進行修改

效果如下：

表格的table：

<el-table :data='tableData' style='width: 100%'> <el-table-column prop='date' label='日期' width='180'></el-table-column> <el-table-column prop='name' label='姓名' width='180'></el-table-column> <el-table-column prop='address' label='地址'></el-table-column> <el-table-column label='操作'> <template slot-scope='scope'> <!-- 點擊編輯進入編輯頁面進行編輯表格數據 --> <el-button size='small' @click='handleEdit(scope.$index, scope.row)'>編輯</el-button> <el-button size='small' type='danger' @click='handleDelete(scope.$index, scope.row)'>刪除</el-button> </template> </el-table-column></el-table>

彈出框的設置：

<!-- 下面這個用來設置點擊添加按鈕的彈出框，里面可以進行嵌套表格來展示彈出的表格信息,使用下面的:visible.sync來控制顯示與否 --><!-- 里面綁定的是我們新設置的值，填寫完成后，將我們這個新值塞到頁面中所有的數據當中去 --><el-dialog :visible.sync='dialogFormVisible'> <!-- 在el-dialog中進行嵌套el-form實現彈出表格的效果 --> <el-form :model='form'> <el-form-item label='地址' :label-width='formLabelWidth'> <el-input v-model='form.address' auto-complete='off'></el-input> </el-form-item> <el-form-item label='姓名' :label-width='formLabelWidth'> <el-input v-model='form.name' auto-complete='off'></el-input> </el-form-item> <el-form-item label='日期' :label-width='formLabelWidth'> <el-date-pickerv-model='form.date'type='date'placeholder='選擇日期'value-format='yyyy-MM-dd' ></el-date-picker> </el-form-item> <el-form-item label='性別' :label-width='formLabelWidth'> <el-select v-model='form.region' placeholder='性別'><el-option label='男' value='男'></el-option><el-option label='女' value='女'></el-option> </el-select> </el-form-item> </el-form> <div slot='footer' class='dialog-footer'> <el-button @click='cancel'>取 消</el-button> <!-- 設置觸發更新的方法 --> <el-button type='primary' @click='update'>確 定</el-button> </div></el-dialog>

完整的代碼如下：

<template> <div v-loading='loading' element-loading-text='拼命加載中'> <!-- v-loading 設置加載 --> <div class='selectMenu'> <el-date-picker v-model='value6' type='daterange' placeholder='選擇日期范圍'></el-date-picker> <!-- 點擊觸發add方法 --> <el-button type='primary' @click='add'>新增</el-button> </div> <div class='tableMain'> <el-table :data='tableData' style='width: 100%'><el-table-column prop='date' label='日期' width='180'></el-table-column><el-table-column prop='name' label='姓名' width='180'></el-table-column><el-table-column prop='address' label='地址'></el-table-column><el-table-column label='操作'> <template slot-scope='scope'> <!-- 點擊編輯進入編輯頁面進行編輯表格數據 --> <el-button size='small' @click='handleEdit(scope.$index, scope.row)'>編輯</el-button> <el-button size='small' type='danger' @click='handleDelete(scope.$index, scope.row)'>刪除</el-button> </template></el-table-column> </el-table> </div> <div class='page'> <el-pagination@size-change='handleSizeChange'@current-change='handleCurrentChange':current-page.sync='currentPage3':page-size='100'layout='prev, pager, next, jumper':total='1000' ></el-pagination> </div> <!-- 下面這個用來設置點擊添加按鈕的彈出框，里面可以進行嵌套表格來展示彈出的表格信息,使用下面的:visible.sync來控制顯示與否 --> <!-- 里面綁定的是我們新設置的值，填寫完成后，將我們這個新值塞到頁面中所有的數據當中去 --> <el-dialog :visible.sync='dialogFormVisible'> <!-- 在el-dialog中進行嵌套el-form實現彈出表格的效果 --> <el-form :model='form'><el-form-item label='地址' :label-width='formLabelWidth'> <el-input v-model='form.address' auto-complete='off'></el-input></el-form-item><el-form-item label='姓名' :label-width='formLabelWidth'> <el-input v-model='form.name' auto-complete='off'></el-input></el-form-item><el-form-item label='日期' :label-width='formLabelWidth'> <el-date-picker v-model='form.date' type='date' placeholder='選擇日期' value-format='yyyy-MM-dd' ></el-date-picker></el-form-item><el-form-item label='性別' :label-width='formLabelWidth'> <el-select v-model='form.region' placeholder='性別'> <el-option label='男' value='男'></el-option> <el-option label='女' value='女'></el-option> </el-select></el-form-item> </el-form> <div slot='footer' class='dialog-footer'><el-button @click='cancel'>取 消</el-button><!-- 設置觸發更新的方法 --><el-button type='primary' @click='update'>確 定</el-button> </div> </el-dialog> </div></template><script type='text/ecmascript-6'>export default { data() { return { loading: true, // 表格的數據 tableData: [{ date: '2017-05-01', name: '士兵76', region: '男', address: '國王大道', city: ''},{ date: '2017-05-02', name: '源氏', region: '男', address: '尼泊爾', city: ''},{ date: '2017-05-03', name: '黑百合', region: '女', address: '沃斯卡亞工業區', city: ''},{ date: '2017-05-04', name: '獵空', region: '女', address: '國王大道', city: ''},{ date: '2017-05-03', name: '查莉婭', region: '女', address: '沃斯卡亞工業區', city: ''},{ date: '2017-05-03', name: '禪雅塔', region: '男', address: '尼泊爾', city: ''},{ date: '2017-05-03', name: '半藏', region: '女', address: '花村', city: ''} ], // 城市選擇數據 cityList: [{ name: '國王大道' },{ name: '尼泊爾' },{ name: '沃斯卡亞工業區' },{ name: '花村' },{ name: '尼泊爾' },{ name: '月球基地' } ], dialogFormVisible: false, formLabelWidth: '80px', // 設置form用于進行添加的時候綁定值 form: {}, value6: '', currentPage3: 1, currentIndex: '' }; }, created() { // 設置回調函數，進行1.5秒的loading動畫顯示 setTimeout(() => { this.loading = false; }, 1500); }, methods: { showTime() { this.$alert(this.value6, '起止時間', {confirmButtonText: '確定',callback: action => { this.$message({ type: 'info', message: '已顯示' });} }); }, // 增加數據的方式，單獨的設置一些值，用于增加功能，這些值放在對象里面進行設置，然后將這個新增的對象塞到總數據里面 add() { this.form = {date: '',name: '',region: '',address: '' }; // 設置點擊按鈕之后進行顯示對話框 this.dialogFormVisible = true; }, update() { // this.form.date = reformat(this.form.date); // 可以在html上面進行設置日期的格式化 // 將我們添加的信息提交到總數據里面 this.tableData.push(this.form); this.dialogFormVisible = false; }, handleEdit(index, row) { // 將數據的index傳遞過來用于實現數據的回顯 this.form = this.tableData[index]; this.currentIndex = index; // 設置對話框的可見 this.dialogFormVisible = true; }, handleDelete(index, row) { // 設置類似于console類型的功能 this.$confirm('永久刪除該文件, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning' }).then(() => { // 移除對應索引位置的數據，可以對row進行設置向后臺請求刪除數據 this.tableData.splice(index, 1); this.$message({ type: 'success', message: '刪除成功!' });}).catch(() => { this.$message({ type: 'info', message: '已取消刪除' });}); }, cancel() { // 取消的時候直接設置對話框不可見即可 this.dialogFormVisible = false; }, handleSizeChange(val) { console.log(`每頁 ${val} 條`); }, handleCurrentChange(val) { console.log(`當前頁: ${val}`); } }};</script><style lang='scss'>.basetable { .tableMain { margin: { top: 10px; } } .page { float: left; margin: { top: 10px; } }}</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。