位置: IT常识 - 正文

ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作(elementui form rules)

编辑:rootadmin
ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

推荐整理分享ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作(elementui form rules),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui form rules,elementui table formatter,element表格formatter,elementui form rules,element ui form,elementui table formatter,element form,element ui form,内容如对您有帮助,希望把文章链接给更多的朋友!

在写项目时,老师通过向后端发请求获得表格原来的数据来填充修改表单里的数据。 这是表格: 这是点击修改按钮后显示出来的修改表单:

ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作(elementui form rules)

但本地里都已经有这些数据了,就没必要再发一次请求,徒增服务器压力。

准备

可是该怎么获得当前行的数据填充上去呢?答案在slot-scope="scope"。 slot-scope="scope"本质上就是一个插槽,scope的row属性有着表格一整行的数据。 它还有其他有用的属性,比如$index,这里不多介绍。

步骤

把原来的修改按钮包裹在<template>标签里,再用scope.row就能轻松获得表格数据了。

接下来就把scope.row作为参数传递给修改按钮的点击事件的回调函数showEditDialog,在这个函数里把自定义的editForm对象(这个自定义对象里存放修改表单的所有数据,里面的属性跟input框的文本值绑定了)赋值为scope.row。

<template slot-scope="scope"> <!-- 修改 --> <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button> <!-- 删除 --> <el-button type="danger" icon="el-icon-delete" size="mini"></el-button> <!-- 分配角色 --> <el-tooltip class="item" effect="dark" content="分配角色" placement="top"> <el-button type="warning" icon="el-icon-setting" size="mini"></el-button> </el-tooltip></template>

展示编辑用户的对话框+数据回显:

showEditDialog(editForm) { this.editDialogVisible = true this.editForm = editForm},

注意,不能只把用到数据的修改按钮放在<template>里、用不到数据的其他按钮就不放在里面了,这样会导致template外的按钮无法显示。要放就全部放。

其他按钮放<template>外: 其他按钮放<template>里:
本文链接地址:https://www.jiuchutong.com/zhishi/299265.html 转载请保留说明!

上一篇:2023高频前端面试题(持续更新 含答案)(2021高频前端面试题汇总)

下一篇:Vue 原理整理(vue3 原理)

  • 怎么算印花税计算器
  • 主办会计跟会计有什么区别
  • 股权收购收购方支付的期间损益计入
  • 进出口企业需要具备的资质
  • 季报利润总额是填本季度金额还是本年累计数
  • 工资代扣工会会费
  • 公司把钱借给个人
  • 收回已冲销的坏账分录
  • 工资分配率的计算公式
  • 写字楼出租流程
  • 研发设备一次性扣除账务处理
  • 补计提去年的增值税
  • 企业不重视引起的四大涉税风险
  • 没有发票的固定资产可以税前扣除吗
  • 城建税教育附加税的会计分录
  • 跨年补计提工资汇算清缴
  • 公司没有实缴可以破产么
  • 什么人适用131419手机号码
  • 员工奖励专项基金怎么填
  • 按揭的车可以只买交强险吗
  • 项目结束,财务应该怎么做
  • ping命令出现unreachable
  • 会计差错更正账务处理 对股价影响
  • php测验
  • 安全平台无法认证怎么办
  • win11自带的播放器
  • 采用权益法核算
  • 企业采用备抵法核算坏账
  • 文竹怎么养才能更旺盛浇点醋
  • 小规模纳税人补缴企业所得税分录
  • 企业取得的搬迁补贴
  • OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading “C:\ProgramData\Anaconda3\lib\site-packages\to
  • 特许权使用费20%
  • 税控系统的维护包括哪些内容
  • python的Django框架
  • 过来人告诉你:女人最珍贵的三种东西,舍得给你说明爱你
  • 数据挖掘技术介绍
  • 代缴社保可以领住房补贴吗
  • 技术软件开发
  • 差旅费计入什么
  • 公司进项抵税
  • 董事费收入
  • java泛型的定义和使用
  • 公司旅游费会计分录
  • 科技局创业扶持资金
  • 免税蔬菜交企业所得税吗
  • db2入门
  • 如何办理出口收款凭证
  • 购买原材料没有发票能入库吗
  • 公司房产税如何避税
  • 本票汇票支票的区别表格
  • 出口额和外汇收入
  • 挂靠公司收的税费计入什么科目?
  • 营改增适用范围
  • 金三税务系统怎样修改财务人员跟办税人?
  • 什么是非关联方账户
  • 私营企业算固定收入吗
  • mysql删除的数据恢复
  • windows自带的几个软件
  • Windows7任务计划在什么位置?
  • 分区时把磁盘格式化了,如何恢复
  • windows server 2008 硬盘格式
  • ubuntu系统中文名字
  • centos中用户的基本属性
  • win7系统打开网络看不到其他电脑
  • WIN764位系统8G内存识别一半解决办法
  • win10系统家庭组如何关闭家庭组访问用户名密码
  • u3d手游开发
  • js如何获取url
  • JQuery datepicker 用法详解
  • shell脚本中调用外部c程序
  • unity动画教程
  • jquery示例
  • 对应用进行单元测试的是
  • 严格模式的作用
  • jquery设置隐藏属性
  • 云南人社医保缴费步骤
  • 不予税务行政许可
  • 河北省房产评估机构排名
  • 销货清单表格的制作方法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设