共计 1312 个字符,预计需要花费 4 分钟才能阅读完成。
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. 在浏览器的控制台中, 你就会看到对应的输入后果。是不是很简略, 是不是很棒! 让咱们一起致力走向巅峰! 在这个畛域不要认输, 不要抬头, 不要放弃!
// 本期的教程到了这里就完结啦, 心愿对你有所帮忙! 让咱们一起加油!
正文完