1. Example effect:

  1. Components used in the example:

This example uses Element’s

Table component: EL-table

Dropdown menu: el-dropdown;

  1. usage

< template slot-scope=”scope” >{{ scope.$index }} {{ scope.row }}

  1. Example code, explained in detail in the comments:

Copy the code

<el-table-column label=" index value "width="400"> <template slot-scope="scope"> <! - slot - scope = "scope" here apply to the current cell - > < span > {{scope. $index}} < / span > <! $index </template> </el-table-column> <el-table-column label=" title "width="350"> <template slot-scope="scope"> <! - slot - scope = "scope" here apply to the current cell - > < span > {{scope. Row. The title}} < / span > <! $index [scope.$index] --> <! </template> </el-table-column> <el-table-column label=" operation "> <template slot-scope="scope"> <! -- slot-scope="scope" --> <el-dropdown size="medium" split-button type="primary"> more <el-dropdown menu slot="dropdown"> <el-dropdown-item @click.native.prevent="handleEdit(scope.$index, Scope. Row)"> </el-dropdown-item> <el-dropdown-item @click.native. Prevent ="getUp(scope. Scope. Row)"> </el-dropdown-item> <el-dropdown-item @click.native. Prevent ="getDown(scope. Scope. Row)"> </el-dropdown-item> <el-dropdown-item @click.native. Prevent ="handleDelete(scope. Scope. Row)"> delete </el-dropdown-item> <! Click events are no longer on the root element because there are several layers of structure. -- > <! -- The click event is invalid if there is no. Native added! -- > <! Native means listening for the root element of the component. -- > <! </el-dropdown menu> </el-dropdown> </template> </el-table-column> </el-dropdown menu </el-dropdown> </template> </el-table-column>Copy the code

Delete index with +1

Data () {return {tableData: [{title:123,age:11},{title:456,age:18}] }} methods:{handleDelete(index, row) {this.tabledata.splice (index+1, 1); // delete index +1!!!!!!!

Post (config.newsDelete,//-- {id: row.id,} -- {headers: {Authorization: "Bearer "+ sessionstorage.getitem ("token")//-- request header validation}}).then(res => {this.rendering()//-- deleted rerender}); }Copy the code

}