vue+element中应用table踩坑
1.开发环境 vue.js
2.电脑系统 windows 10 专业版
3.在开发的过程中,咱们常常会应用 vue+element进行开发,应用这样的成果!
4.整体思路:
应用 vue + element 进行开发,应用 element 中的 table ### 树形数据与懒加载5.在我的项目中,咱们常常会点击的时候向后盾传一些值,个别都是 id 的比拟多,那么在点击的时候怎么获取到 对应的 id 呢?
办法如下:
//在vue模板中增加如下代码:
<el-table-column fixed="right" label="操作" width="140"> <template slot-scope="scope"> <el-button @click.native.prevent="handleAdd(scope.$index,tableData)" type="text" size="small"> 新增 </el-button> <el-button @click="xiugai(scope.row)" type="text" size="small"> 批改 </el-button> <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" type="text" size="small"> 移除 </el-button> <!-- 批改 按钮--> </template> </el-table-column>6.在methods 中增加如下代码:
//点击批改 xiugai( rows){ var _this=this; console.log(rows) console.log("我是批改------------------------"); // console.log(rows[index]); // _this.bianhao=rows[index].code; // _this.mingcheng=rows[index].name; // // _this.handleAdd(); // _this.handleEdit(); console.log("我是对应的id"); console.log(rows[index].id); _this.chenxgid=rows[index].id; var dd={ id:rows[index].id } chenxiugai(dd).then(res=>{ console.log("传完id之后,后盾返回对应的数据"); console.log(res); if (res.id!=""){ //如果 id不为空,示意有数据, _this.handleEdit(); // 把后盾的数据渲染到表单下面 _this.hqxg=res.data; _this.bianhao=_this.hqxg.code; _this.mingcheng=_this.hqxg.name; } }) },7.在浏览器的控制台中,你就会看到对应的输入后果。是不是很简略,是不是很棒!让咱们一起致力走向巅峰!在这个畛域不要认输,不要抬头,不要放弃!
//本期的教程到了这里就完结啦,心愿对你有所帮忙!让咱们一起加油!