009: Code example of deleting the current row in el-table in vue

insert image description here

009th

View column directory: VUE — element UI

echarts, openlayers, cesium, leaflet, mapbox, d3, canvas free communication community

Column goal
Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and introduction of information points to achieve flexible use.

(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else , v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixins, render, internationalization, Vue Router, etc.
（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox，el-input，el-select, el -cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

Contents of this article

The table made by el-table sometimes needs to add and delete a row.
insert image description here

method

this.resource.splice(x, 1) This sentence is the core code.

code in template

<el-table-column label="操作"> 
    <template slot-scope="scope" > 
        <el-button type="text" @click="modify(scope.row)"> 修改</el-button> 
        <el-button type="text" @click="delResource(scope.$index)"> 删除</el-button> 
    </template> 
</el-table-column>

code in methods

addResource(){
    
     
    let newObj=                     {
    
     
                name:"new resource", 
            }; 
    this.resource.push(newObj); 
}, 
delResource(x){
    
     
    console.log(x) 
     this.resource.splice(x, 1) 
},

grammar:

array.splice(index, howmany, item1, …, itemX)

index is required. Integer specifying where to add/remove items, use negative values to specify the position from the end of the array.
howmany Optional. The number of items to delete. If set to 0, no items will be removed.
item1, ..., itemX are optional. The new item to add to the array.