vue 改变table某一行的值_vue element ui 表格 selection-change方法使用(获取某行数据)...
element table 多选表格，表格中有操作按钮的话，获取当前勾选行的数据，大家都知道用slot-scope="scope" 来获取，但如果要实现的功能是在表头上了，那要怎么获取当前前勾选的这一行的数据呢？这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。需求：当点击表格上的批量操作按
element table 多选表格，表格中有操作按钮的话，获取当前勾选行的数据，大家都知道用slot-scope="scope" 来获取，但如果要实现的功能是在表头上了，那要怎么获取当前前勾选的这一行的数据呢？这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。
需求：当点击表格上的批量操作按钮时，怎么获取当前勾选的这一行的数据呢？
效果图
效果图
表格链接
代码：
批量备注
:data="records"
:border="true"
@selection-change="handleSelectionChange"> // 主要用这个方法实现
title="提示"
:visible.sync="dialogModifyRemark"
width="20%">
确定批量备注？
取 消
确 定
// 这里是ts的语法，js的直接按js的语法来就可以了
/**
* 显示批量修改备注弹框
* @protected
* @returns boolean
*/
protected dialogModifyRemark: boolean = false;
/**
* 批量发送修改备注短信
* @protected
* @return boolean
*/
protected async batchModifyRemark(): Promise
{
this.dialogModifyRemark = true;
}
/**
* 选中数据存放
* @protected
* @return array
*/
protected multipleSelection: Array = [];
/**
* 表格中某一项选中
* @protected
* @return void
*/
protected handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection) // 当前选中的某一行打印出来的结果
}
/**
* 请求批量发送修改备注
* @protected
* @return void
*/
protected async saveModifyClick(): Promise
{
try
{
if (!this.multipleSelection.length)
{
this.$message.error("请选择需要备注的记录");
this.dialogModifyRemark = false;
return;
}
// multipleSelection是存放所有选中的某行的数据
// 然后用map去循环数组里的数据并且拿到你想要的参数
let ids = this.multipleSelection.map((item: any) => item.OrderId); // 主要是这行代码实现
const data = {
OrderIds: ids.join(","), // 把数组以字符串拼接起来，用逗号隔开
};
let { content: result } = await this.orderService.sendModifyRemark(data);
if(result)
{
this.dialogModifyRemark = false;
this.$message.success("批量备注成功");
(this as any).onSearch();
}
}
catch(err)
{
this.$message.error(err);
}
}
打印结果
当前选中的某一行打印出来的结果
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)