位置: 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 原理)

  • 房地产企业拆迁补偿费契税12366
  • 红冲以前年度收入成本的账务处理
  • 单位车辆交强险赔付流程
  • 可转换公司债券属于哪一类金融资产
  • 固定资产折旧的影响因素
  • 主营业务收入如何红冲
  • 远期转账支票怎么取钱
  • 税务稽查补缴的税款怎么处理
  • 股权转让如何避免缴纳个税
  • 小微企业季度超过45万如何填申报表
  • 商品销售税金及附加会计分录
  • 买了税控盘还需要买打印机吗
  • 可以选择用简易计算办法计税的是哪些
  • 5年内亏损弥补账务
  • 案例讲解:将自己的房产用于办公使用,在税收的缴纳中该如何把控?
  • 内部收益率的计算步骤有
  • 金融公司一般有哪些业务
  • 出纳汇错款会计怎么做账
  • 企业公户转别的公司公户他不给开发票怎么操作?
  • 退税指导
  • 一般劳务报酬和其他劳务报酬的区别
  • 公司购买理财产品如何做账
  • 对账工作的主要内容为什么不包括账表核对
  • vue获取本地文件生成流
  • 对于接受捐赠的固定资产
  • 上市公司股东股份轮候冻结是什么意思
  • 购买性支出和转移性支出都计入GDP
  • 民间非营利组织会计制度
  • 基于opencv的图像处理
  • 本月增加的无形资产数量
  • php微信公众号消息推送
  • 【Pytorch深度学习实战】(11)变分自动编码器(VAE)
  • testdisk安装方法
  • ftp命令行
  • 承包安装工程
  • 小规模纳税人采购需要发票吗
  • mysql select语法的使用
  • 出口退税抵减应纳税额
  • 现金流量表里包括应收票据吗
  • 客户多付款不要了多这部分是哪种收入?
  • 物业增值服务主要有哪些
  • 小规模纳税人运输费计入什么科目
  • 个税系统中的离职怎么填
  • 主要业务是生产销售家电
  • 文化事业建设费减免政策
  • 已认证发票是否已抵扣
  • 开票金额为什么是负数
  • 企业所得税汇算表
  • 城市生活垃圾处理费征收管理办法
  • 银行扣结算卡年费合理吗
  • 公户转私户的钱会退回吗
  • 未取得增值税发票措施有哪些
  • 微信扣除手续费超过多少免费
  • 帮员工代缴社保分录怎么办
  • 美金形式发票
  • 私营企业固定资产法律制度
  • 大型商业企业
  • debian yum安装
  • centos安装lvm
  • windows中alt+tab
  • Win7如何安装音频设备
  • 用linux配置ftp服务器的过程
  • win7显示桌面的组合键
  • 安卓网页开发工具
  • 游戏开发主要学什么
  • bootstrap范例
  • [置顶]bilinovel
  • vue.js如何使用
  • 性能优化实验
  • python中类怎么用
  • unity 版本控制
  • python中读取文件
  • android圆形按钮
  • 置顶高站位
  • web前端网页设计师
  • jquerybind事件
  • js弹出框怎么写
  • 税控盘税务数字书驱动找不到应用程序是咋回事
  • 上海市个人所得税计算
  • 个体户注销税盘需要公章吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设