Vue uses the Element UI component to obtain a certain field attribute of the form element as a parameter of the @ method to send asynchronous requests, such as obtaining the line number of a certain row or the value of a certain field

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>

Guess you like

Origin blog.csdn.net/weixin_46195957/article/details/110928251