When scenario analysis
uses Vue as the front end and uses the table components in Element ui, we take the most basic additions, deletions and modifications. We need to get the current line number or a field value through @'method name' (parameter), and then in method{} Send asynchronous requests to the backend
Then the question is coming.
The students who use vue know that the two-way data binding of v-model, then can we do this: put a v-model in a certain field of the table, and then put it in data{return(){ }} Set the attribute value to'empty', and then directly get this. field name in the defined method, the
code is as follows:
<el-table-column
prop="id" label="序号" width="50" v-model=sid >
</el-table-column>
//改变开关状态
changeSwitch(){
this.$http.post("http://localhost:8989/zs/user/changSwitch?status="+!this.changestatus+"&id="+this.sid)
},
Obviously the above method will not work, why?
When using the table component in Element ui, the reason why we can traverse the Json data obtained from the back end without using v-for is because we bind the attribute value in the table with v-bind:data=“a” , And then in data(){ return (){ a[]}} Note that a here is generally an array, and each element in the array is generally a JavaBean.
Then when we bind some methods in the table, the compiler does not I don't know which row we specify to send back the field value (sid.) for additions, deletions and modifications to the backend, causing data conflicts, so this method will definitely not work!
Solution
Use the $index, row provided by Element UI to
get the index of each row (index, note that it starts from zero)----------scope.$index
Get the data of each row-----------scope.$row (we can get the value of id through row.id)
<template slot-scope="scope">
<el-switch @change="changeSwitch(scope.row.id)" <!-- 有时需要在前面添加一些参数-->
v-model="changestatus"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>