element-ui el-dialog嵌套table组件，ref问题

最新推荐文章于 2024-05-23 14:16:23 发布
最新推荐文章于 2024-05-23 14:16:23 发布
阅读量1.6w 收藏 8
点赞数 2
分类专栏： 前端 开发 vue 爬坑 文章标签： vue 前端 element dialog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_dxj/article/details/86162185
版权
前端 同时被 3 个专栏收录
24 篇文章 2 订阅
订阅专栏
开发
12 篇文章 0 订阅
订阅专栏
爬坑
9 篇文章 0 订阅
订阅专栏

项目中有个需求弹窗显示的时候，返现数据需要选中，看了elementui table组件中的方法

传入需要需要选中的行和是否选中的状态，调用的时候肯定是需要增加ref的，

this.$refs.moviesTable.toggleRowSelection(this.$refs.moviesTable.data[想要选中行的下标],true)

但是在弹窗显示的时候这样用，会报错，（this.$refs.moviesTable为undefined）

解决办法 使用替换$nextTick

companyChange 弹窗显示的方法，selectArr 是需要选中的数据数组，tableData是列表数据

wo_dxj
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue -- 通过 el-dialog 编辑表格中的内容 & 对 el-table 对象数组中赋值时的坑
支棱起来
10-12 1410
html 代码 <el-table-column prop="operation" label="操作" width="120" align="center"> <template slot-scope="scope"> <a style="color:#2C8DF4;text-decoration:underline" @click="editDes(scope.$index,scope.row)">编辑描述</a> <a sty
el-dialog与el-tabs嵌套弹窗中的按钮不生效
Aquarius09的博客
07-25 372
el-dialog与el-tabs嵌套弹窗中的按钮不生效
el-table 实现嵌套表格的思路及完整功能代码
最新发布
sinat_33255495的博客
05-23 669
这里总结以下要点啊，首先嵌套就是 el-table 中再套一个 el-table，但重点是子表格不要显示表头，而且样式要自己写，尤其是要通过重写表格样式。这里只是粗略实现了样式，需要的同学自行优化样式。
使用el-dialog里面嵌套子组件，点击el-table里的按钮并利用$refs为子组件某个属性赋于row这个值，出现关闭子组件后再点开row多了某个属性
lx1921593177的博客
09-11 254
利用深拷贝，将row完完全全复制到另一个对象并传给子组件
element-dialog封装成子组件
weixin_33928137的博客
10-27 1701
1.父组件 <template> <card-layout :title="L('Users')" :actions="actions" @click="handleClick"> <el-table :data="tableData4.slice((currentPage-1)*pagesize,currentPage*pagesize)" :...
element-ui Dialog封装子组件
洛一
07-02 579
svg 图片直接引用 <imgsrc="~@/svg/background.svg"class="logo"alt="logo">
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
xh1506101064的博客
01-12 7618
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui资源包
08-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，以便快速构建美观、响应式的用户界面。这个"element-ui资源包"包含了所有你需要在前端项目中使用 Element UI 的必要文件和资源。 ...
解决el-table的$refs获取不到的问题（踩坑篇）
草巾冒小子的博客
08-31 5379
解决el-table的$refs获取不到的问题（踩坑篇）
vue+element-ui el-dialog嵌套table组件，ref问题,toggleRowSelection的undefined
LLL_liuhui的博客
09-05 8165
项目需求，返回数据的时候，el-dialog弹窗里面的table组件需要设置默认选中。 要设置选中，则要调用table组件默认的toggleRowSelection(row,true)方法，true默认选中。 问题：el-diaglog组件里面的table组件时自定义的组件。 <el-dialog title="选择用户" :width="dialo...
[element-ui]el-dialog弹窗table表格多选并标记数据联动
zhangxueyou2223的博客
11-23 1666
element-ui 点击增加客户，需要一个弹窗，弹窗里面是列表，并且支持多选及数据联动，新增删除数据，后台返回数据然后回显到前台展示。效果：多选选中后需要用到的模块dialog对话框tableel-dialog是什么？以上就是今天要讲的内容，本文仅仅简单介绍了el-dialog弹窗table表格多选并标记数据联动，关于dialog弹窗Table提供了大量能使我们快速便捷地处理数据的函数和方法。
Element Plus封装el-dialog、el-table、el-select表格对话框，实现单选多选场景。
m0_67584973的博客
06-08 2964
Element Plus 封装表格对话框组件，实现单选以及多选的场景。
vue3+el-dialog+el-table封装一个弹框式的table选择组件
jieyucx的博客
11-21 1845
vue3+el-dialog+el-table封装一个弹框式的table选择组件
ElementUI用el-table实现表格内嵌套表格
香菜的博客
11-20 6983
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
vue el-dialog封装成子组件（组件化）
路虽远行则将至，事虽难做则必成。
10-18 3273
实际开发过程中我们经常听见组件化开发，但在实际开发过程中（没有人审查时）怎么方便来我们有时是因为时间不够，所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行虽然不能要求自己写出高效复用性高的组件，把dialog弹出框写成一个子组件抽走还是可以的当你把表单抽在就会发现代码少了很多。
解决element-ui el-dialog 中 含有el-table时 $refs获取不到的问题
微雨燕双飞
03-25 6505
在项目中遇到一个坑，element-ui el-dialog 中 含有el-table时 $refs获取table的ref总是undefined 研究了很久发现一个解决办法有效，比定时器先打开dialog再关闭的方案好多了 //点击显示Dialog showParentModel(){ //这个是dialog显示 this.dialogParentVisible = true; ...
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值