vue使用Element UI组件获取表单元素的某一字段属性作@方法的参数发送异步请求,如获取某一行的行号或者某个字段值
情景分析用vue作前端并且使用Element ui中的表格组件时,就拿最基础的增删改,我们需要获取当前行号或者某一字段值通过@‘方法名’(参数),然后在method{}中向后端发送异步请求那么问题来了使用vue的同学都知道,v-model的双向数据绑定,那我们可不可以这样做:在table的某一字段中来个v-model,然后在data{return(){ }} 设置属性值为‘空’,然后在定义好的方法
情景分析
用vue作前端并且使用Element ui中的表格组件时,就拿最基础的增删改,我们需要获取当前行号或者某一字段值通过@‘方法名’(参数),然后在method{}中向后端发送异步请求
那么问题来了
使用vue的同学都知道,v-model的双向数据绑定,那我们可不可以这样做:在table的某一字段中来个v-model,然后在data{return(){ }} 设置属性值为‘空’,然后在定义好的方法中直接this.字段名进行获取,
代码如下:
<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)
},
显然以上方法是行不通的,为什么呢?
在使用Element ui 中的table组件,我们之所以不需要使用v-for就可以遍历从后端拿到的Json数据,是因为我们在table中v-bind:data=“a” 绑定了属性值,然后在data(){ return (){ a[] } } 注意这里的a一般是个数组,数组中的每一个元素一般都是一个JavaBean
然后我们在table中绑定某些方法时,编译器并不知道我们指定要传回后端进行增删改的字段值(sid.)是哪一行的,造成数据冲突,所以这个方法是肯定行不通的!
解决方法
使用Element UI 提供的 $index, row
拿到每一行的index(索引,注意是从零开始的)----------scope.$index
拿到每一行的数据-----------scope.$row(我们可以通过row.id 来获取id的值)
<template slot-scope="scope">
<el-switch @change="changeSwitch(scope.row.id)" <!-- 有时需要在前面添加一些参数-->
v-model="changestatus"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
更多推荐
所有评论(0)