vue antd表格和modal一起使用时表格样式改变

最新推荐文章于 2024-04-22 16:58:34 发布
最新推荐文章于 2024-04-22 16:58:34 发布
阅读量1.4k 收藏
点赞数
文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_40660633/article/details/105865062
版权

实现的功能是点击编辑然后弹出modal框，结果点击编辑后表格里的样式忽然变了。按道理modal是不影响后面页面的样式。
这是原先的样式在这里插入图片描述
这是点击跳出modal后的样式
在这里插入图片描述
仔细看了控制台代码，
这是点击前的控制台截图
在这里插入图片描述
这是点击后控制台的截图
在这里插入图片描述
无缘无故多了个div！
最后发现，其实是我在table中写了v-if来控制弹出modal，才导致出现这个div，只要把这个语句放在table外面，就不会出现这个情况。
这是原先的代码
在这里插入图片描述

这是修改后的代码，把这个eidt组件代码移到table外

在这里插入图片描述

baidu_40660633
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue table表格的封装和使用
09-01
1、该封装的组件包含分页、反选、多选、过滤、排序、树形数据懒加载、单元格绑定事件、行绑定事件、指定行添加背景色等功能，这些功能可以自动控制是否显示； 2、控制列的显示隐藏、表格的高度根据窗口大小自动改变、动态设置列宽； 3、使用slot，灵活修改列的显示，例如通过标签或者输入框显示； 4、组件可以直接使用，使用简单，方便，有使用示例和注释，上手快； 5、经过多个项目使用，功能稳定； 6、遇到使用问题可以随时帮助解答。
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden; .item li{ height: 50px; display: flex;
点击表格某项，弹窗显示相应表格数据vue
m0_68428581的博客
12-23 6124
1.效果图2.相关代码(1)点击按钮，在template内(2)弹窗页面，在template内(3)弹窗表格内容，在script内
Ant Design vue 表格数据展开（点击名称可展开）
weixin_73106033的博客
04-07 1084
a-table 自带一个:expandIcon属性 利用这个属性我们可以自定义 图标，同时把名字和图标放在一起渲染 即可实现点击文字和图标一起展开的效果了。要求是点击文件名称和图标都能展开，图标也是自定义的。
Antd-Vue表格中弹出多层Modal 问题解决-小记
m0_54731428的博客
06-12 1231
简单记录下vue前端开发中遇到的一个小问题，不值得在这问题上花费过多时间，谨记
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 3336
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
vue+ant-design-vue嵌套子表格、带复选框表格的使用
weixin_43090018的博客
10-10 4478
1、先来看一下效果，第一个是嵌套表格的，第二张图片是带checkbox的 嵌套子表格核心代码（用到的数据提前在data中定义好） 点击查看权限后弹出嵌套子表格，也就是第一张图片的样子 data() { return { showAuthVisible: false, isVisible: false, visible: false, //是否显示modal isLoading: true, confirmLoading: false
ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
Crazy_GirlLL的博客
08-05 8693
ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
ant design vue 嵌套table 的使用以及 expand事件
qq_44883077的博客
10-21 5697
弹窗原型 **需求：在点击展开图标(+)时，要根据当前列的 变量编号 查询接口。但是expand事件只会获取当前展开行的数据，所以会造成在展开多行，调用查询接口时，传入了相同的 变量编号 ，从而得到相同的数据列表，参见下图 expand(expanded, record)事件提供了两个参数： expanded： 当前行展开 还是 关闭 record： 当前行数据 展开功能配置提供了 expandRowKeys 属性，可以通过该属性，解决以
vue ant design点击弹出Mod页面
qq_42231809的博客
03-30 2669
vue ant design点击弹出Mod页面 样图 第一步:创建list页面 <template> <a-row :gutter="24"> <div> <!-- <a @click="test()" style="padding-left: 5%">测试页面</a>--> <button v-on:click='test()'>测试页面</button> <
vue大数据表格卡顿问题的完美解决方案
10-17
主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 表格组件封装复用
02-27
Vue3 实现表格业务封装，从底层的角度，去带着大家封装一个可编辑的表格。从而在基础的基础上，做一个层次的提升，增加面试通过的几率。帮助大家在开发过程中，提高代码的复用性。
前端CSS基础6（CSS列表与表格的相关属性，边框的样式调整）
最新发布
qq_51752841的博客
04-22 543
CSS列表与表格的相关属性，边框的样式调整
css继承属性和不可继承属性
m0_51181022的博客
04-19 827
有没有在面试中被问到过css的继承属性和不可继承属性？今天就来记录一下css哪些属性是可以继承的，哪些属性是不可以继承的。
css 如何设置背景图片定位
ivan5277的博客
04-19 579
在CSS中设置背景图片的位置，可以使用属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值，包括关键字、长度单位（像素、百分比等）以及组合值。
CSS系列:伪类选择器小记
浪潮行舟_chenjin2136
04-19 763
组合选择器的使用有助于保持HTML代码的语义化，因为它们允许开发者基于元素之间的自然关系来应用样式，而不是强迫添加额外的类或ID。这种做法增加了样式的可复用性，因为相同的组合选择器样式可以在不同的HTML结构中被复用，只要这些结构符合选择器定义的元素关系。组合选择器在CSS中扮演着至关重要的角色，它们提供了一种强大的机制来选择具有特定关系的元素，从而允许开发者以更精细、更具体的方式应用样式。使用伪元素可以在不增加额外HTML元素的情况下实现复杂的设计，这有助于减少DOM的大小，从而提高网页的性能。
css：echarts渐变色转换为css渐变色
1111111111
04-19 249
css里线性渐变从上到下，是to bottom，从左到右，是to right，把颜色数组像['#000','#111','#222']放进去即可，不需要设置百分比位置。offset是百分比位置，color是对应位置的颜色，new graphic前面四个参数表示渐变的方向，我这里默认是从上到下，从左到右，想要反过来的话，直接把颜色反过来就行了。通过一个下拉框来选择渐变类型，为了简化，我设置了三种：水平方向的渐变、垂直方向的渐变和径向渐变用，表格来配置echarts渐变色的百分比位置和颜色。
CSS中的BFC
小卡酷谋的博客
04-22 533
简单来说，就是页面中的一块渲染区域，并且有一套自己的渲染规则。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。在上面的代码中，父元素的高度是靠子元素撑起来的，但是一旦我们给子元素设置了浮动，那么父元素的高度就塌陷了。效果：在上面的代码中，我们要设置两栏布局，左边栏宽度固定，右边栏自适应。基于此特点，我们就可以制作两栏自适应布局，方法就是给固定栏设置固定宽度，给不固定栏开启。设置了浮动效果，所以会脱离标准流，自然而然。上面只记录了一些常见的方式，完整的。的高度时，浮动子元素也参与计算。
vue3.2 antdvue3 Form和modal一起使用 resetFields为什么无效
04-06
可能是因为 resetFields 方法默认只会重置被绑定的表单域，而 modal 中的表单域没有被直接绑定到 Form 上，所以 resetFields 方法无法重置它们。 可以尝试在 modal 的关闭事件中手动调用 resetFields 方法，例如： ```html <template> <div> <a-button @click="showModal">打开 Modal</a-button> <a-modal v-model:visible="visible" @cancel="handleCancel" @ok="handleOk"> <a-form :form="form"> <a-form-item label="姓名" name="name"> <a-input v-model:value="form.name" /> </a-form-item> <a-form-item label="年龄" name="age"> <a-input-number v-model:value="form.age" /> </a-form-item> </a-form> </a-modal> </div> </template> <script> import { defineComponent } from 'vue'; import { Modal, Form, Input, InputNumber } from 'ant-design-vue'; export default defineComponent({ components: { 'a-modal': Modal, 'a-form': Form, 'a-input': Input, 'a-input-number': InputNumber, }, data() { return { visible: false, form: {}, }; }, methods: { showModal() { this.visible = true; }, handleCancel() { this.visible = false; }, handleOk() { this.$refs.form.validate((valid) => { if (valid) { // 提交表单 this.visible = false; } }); }, resetForm() { this.$refs.form.resetFields(); }, }, watch: { visible(visible) { if (!visible) { this.resetForm(); } }, }, }); </script> ``` 在上面的代码中，当 modal 关闭时会调用 `resetForm` 方法手动重置表单域。另外，为了获取 Form 实例，还需要给 Form 组件添加一个 ref 属性，例如 `ref="form"`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值