本文實(shí)例為大家分享了vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

這里用到是設(shè)置一個(gè)彈出框來(lái)實(shí)現(xiàn)此功能，還有一種方法是直接在原來(lái)的基礎(chǔ)上面進(jìn)行修改

效果如下：

表格的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'> <!-- 點(diǎn)擊編輯進(jìn)入編輯頁(yè)面進(jìn)行編輯表格數(shù)據(jù) --> <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>

彈出框的設(shè)置：

<!-- 下面這個(gè)用來(lái)設(shè)置點(diǎn)擊添加按鈕的彈出框，里面可以進(jìn)行嵌套表格來(lái)展示彈出的表格信息,使用下面的:visible.sync來(lái)控制顯示與否 --><!-- 里面綁定的是我們新設(shè)置的值，填寫(xiě)完成后，將我們這個(gè)新值塞到頁(yè)面中所有的數(shù)據(jù)當(dāng)中去 --><el-dialog :visible.sync='dialogFormVisible'> <!-- 在el-dialog中進(jìn)行嵌套el-form實(shí)現(xiàn)彈出表格的效果 --> <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> <!-- 設(shè)置觸發(fā)更新的方法 --> <el-button type='primary' @click='update'>確 定</el-button> </div></el-dialog>

完整的代碼如下：

<template> <div v-loading='loading' element-loading-text='拼命加載中'> <!-- v-loading 設(shè)置加載 --> <div class='selectMenu'> <el-date-picker v-model='value6' type='daterange' placeholder='選擇日期范圍'></el-date-picker> <!-- 點(diǎn)擊觸發(fā)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'> <!-- 點(diǎn)擊編輯進(jìn)入編輯頁(yè)面進(jìn)行編輯表格數(shù)據(jù) --> <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> <!-- 下面這個(gè)用來(lái)設(shè)置點(diǎn)擊添加按鈕的彈出框，里面可以進(jìn)行嵌套表格來(lái)展示彈出的表格信息,使用下面的:visible.sync來(lái)控制顯示與否 --> <!-- 里面綁定的是我們新設(shè)置的值，填寫(xiě)完成后，將我們這個(gè)新值塞到頁(yè)面中所有的數(shù)據(jù)當(dāng)中去 --> <el-dialog :visible.sync='dialogFormVisible'> <!-- 在el-dialog中進(jìn)行嵌套el-form實(shí)現(xiàn)彈出表格的效果 --> <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><!-- 設(shè)置觸發(fā)更新的方法 --><el-button type='primary' @click='update'>確 定</el-button> </div> </el-dialog> </div></template><script type='text/ecmascript-6'>export default { data() { return { loading: true, // 表格的數(shù)據(jù) tableData: [{ date: '2017-05-01', name: '士兵76', region: '男', address: '國(guó)王大道', city: ''},{ date: '2017-05-02', name: '源氏', region: '男', address: '尼泊爾', city: ''},{ date: '2017-05-03', name: '黑百合', region: '女', address: '沃斯卡亞工業(yè)區(qū)', city: ''},{ date: '2017-05-04', name: '獵空', region: '女', address: '國(guó)王大道', city: ''},{ date: '2017-05-03', name: '查莉婭', region: '女', address: '沃斯卡亞工業(yè)區(qū)', city: ''},{ date: '2017-05-03', name: '禪雅塔', region: '男', address: '尼泊爾', city: ''},{ date: '2017-05-03', name: '半藏', region: '女', address: '花村', city: ''} ], // 城市選擇數(shù)據(jù) cityList: [{ name: '國(guó)王大道' },{ name: '尼泊爾' },{ name: '沃斯卡亞工業(yè)區(qū)' },{ name: '花村' },{ name: '尼泊爾' },{ name: '月球基地' } ], dialogFormVisible: false, formLabelWidth: '80px', // 設(shè)置form用于進(jìn)行添加的時(shí)候綁定值 form: {}, value6: '', currentPage3: 1, currentIndex: '' }; }, created() { // 設(shè)置回調(diào)函數(shù)，進(jìn)行1.5秒的loading動(dòng)畫(huà)顯示 setTimeout(() => { this.loading = false; }, 1500); }, methods: { showTime() { this.$alert(this.value6, '起止時(shí)間', {confirmButtonText: '確定',callback: action => { this.$message({ type: 'info', message: '已顯示' });} }); }, // 增加數(shù)據(jù)的方式，單獨(dú)的設(shè)置一些值，用于增加功能，這些值放在對(duì)象里面進(jìn)行設(shè)置，然后將這個(gè)新增的對(duì)象塞到總數(shù)據(jù)里面 add() { this.form = {date: '',name: '',region: '',address: '' }; // 設(shè)置點(diǎn)擊按鈕之后進(jìn)行顯示對(duì)話框 this.dialogFormVisible = true; }, update() { // this.form.date = reformat(this.form.date); // 可以在html上面進(jìn)行設(shè)置日期的格式化 // 將我們添加的信息提交到總數(shù)據(jù)里面 this.tableData.push(this.form); this.dialogFormVisible = false; }, handleEdit(index, row) { // 將數(shù)據(jù)的index傳遞過(guò)來(lái)用于實(shí)現(xiàn)數(shù)據(jù)的回顯 this.form = this.tableData[index]; this.currentIndex = index; // 設(shè)置對(duì)話框的可見(jiàn) this.dialogFormVisible = true; }, handleDelete(index, row) { // 設(shè)置類似于console類型的功能 this.$confirm('永久刪除該文件, 是否繼續(xù)?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning' }).then(() => { // 移除對(duì)應(yīng)索引位置的數(shù)據(jù)，可以對(duì)row進(jìn)行設(shè)置向后臺(tái)請(qǐng)求刪除數(shù)據(jù) this.tableData.splice(index, 1); this.$message({ type: 'success', message: '刪除成功!' });}).catch(() => { this.$message({ type: 'info', message: '已取消刪除' });}); }, cancel() { // 取消的時(shí)候直接設(shè)置對(duì)話框不可見(jiàn)即可 this.dialogFormVisible = false; }, handleSizeChange(val) { console.log(`每頁(yè) ${val} 條`); }, handleCurrentChange(val) { console.log(`當(dāng)前頁(yè): ${val}`); } }};</script><style lang='scss'>.basetable { .tableMain { margin: { top: 10px; } } .page { float: left; margin: { top: 10px; } }}</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。