vxe-table 打包部署上线，校验样式失效

最新推荐文章于 2024-11-08 10:48:20 发布
最新推荐文章于 2024-11-08 10:48:20 发布
阅读量826 收藏 2
点赞数 1
分类专栏： vxe-table 文章标签： 1024程序员节 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47085255/article/details/134008933
版权
  • 正常效果
    在这里插入图片描述
  • 打包上线后的样式
    在这里插入图片描述
    样式失效原因，vue版本与vxe-table版本不兼容导致
    版本
"vxe-table": "^4.3.5",
"vxe-table-plugin-element": "^3.0.6",
"xe-utils": "^3.5.4",

由于vxe-table最新版本是4.5.13，项目包版本是以^开头，jenkins上拉取vxe-table最新版本，导致vue与vxe-table不兼容，去掉 ^即可。

^ 会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

vxe-table
https://shixuebin.gitee.io/hexo-blog/
08-09 645
的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响。编译打包，生成编译后的目录：es,lib。-- 引入样式 -->-- 引入脚本 -->...
el-table表格校验input框金额格式化
weixin_46008522的博客
06-10 843
JS
vxe-table 4.8+ 分享单元格数据校验、自定义验证，自定义校验提示样式，看这一篇就够了
chenhdowue的博客
11-08 814
vxe-table 4.8+ 分享单元格数据校验、自定义验证，自定义校验提示样式，看这一篇就够了
vxe-table 更新 v2.9+ 解决表格自定义校验报错问题
我的博客
04-07 6458
vxe-table 更新 v2.9+ 解决表格自定义校验报错问题 旧的自定义校验用法 validator(rule, cellValue, callback){ if (isError) { // 如果校验失败，则返回 callback(new Error('校验不通过提示消息')) } else { // 如果校验成功 callback() } } 新的用法，由于 2....
vxe-table表格组件给row-style和cell-style等修改样式无效的问题，例如：background-color
dlchgg的博客
04-04 964
jsx导致的动态样式失效：background-color得写成backgroundColor
vue+ElementUi打包后样式失效的问题解决
weixin_46147856的博客
07-19 6549
vue+elementui项目打包后,我发现页面样式变成了elementui自带的样式,自己在组件里修改过的样式没有生效。 问题原因: main.js中的引入顺序决定了打包后css的顺序，如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。 解决办法: 调整引入顺序,先引入第三方组件，再引入router，就能实现组件样式在第三方样式之后渲染。 代码如下: main.js import Vue from 'vue' import App from './App' impor
踩坑： vxe-table-plugin-export-xlsx/dist/index.common.js 报错 --- vxe-table-plugin-export-xlsx
weixin_44019706的博客
10-26 1222
先发现，注释这两句运行就不报错了（如下图），所以是 vxe-table-plugin-export-xlsx 的原因。
vxe-table判断渲染列丢失问题
D丶bird
01-09 496
vxe-table判断渲染列丢失问题
vxe-table 更新 v2.9.17+ 解决表格原始数据无法被校验问题，表格校验无效问题
我的博客
08-27 5463
vxe-table 更新 v2.9.17+ 解决表格原始数据无法被校验问题，表格校验无效问题 旧的 validate 用法，无论数据是否发生变动，都会校验全量数据： //... methods: { // ... submitEvent(){ // 全量校验 this.$refs.xTable.validate().then(errMap => { if (errMap) { // 校验不通过！ } else {
j-vxe-table呢
最新发布
03-30
可能还需要考虑j-vxe-table的高级功能，比如行编辑、数据校验，这些在之前的回答中没有涉及，但现在用户可能希望了解如何在这些场景下正确使用分页和数据加载。需要整理出j-vxe-table的核心功能、配置步骤、常见问题...
vue table组件删除或新增行时，当前行的组件没有被删除
weixin_42018331的博客
05-23 651
场景：table组件每一行，每一列校验不通过都会显示tips（hover提示）组件，页面有校验按钮，当新增一行，点击校验，校验不通过的行具体到某一列数据会显示tips提示组件，当新增两行填数据后，点击校验按钮，两行都有出现校验不通过的tips提示，删除其中一行，再新增一行，未校验的情况下，之前删除的那行的tips提示还在，再新增一行，没有tips提示组件，也就是删除时，只删除了当前行，当前行的组件未删除。 解决： handlerDeleteInfoGuaran(index){ this.InfoGuara
vxe-table表格校验失败后保持可以编辑状态
qq_27161847的博客
11-09 1394
vxe-table表格校验失败后保持可以编辑状态
vue项目打包上线后页面样式与开发页面不一致
朽木自雕的博客
06-10 4135
vue项目打包上线后页面样式与开发页面不一致 原因： 打包的过程会进行优化，导致引入样式文件的顺序发生变化 解决办法： 将自己写的样式文件放在最后面，框架什么的放在前面 注意：每个组件的样式文件记得加上scoped，防止样式冲突 ...
解决vxe-table切换显示隐藏的时候表格样式错乱问题
前端你鹏哥的博客
06-29 1260
此时我们只需要在切换表格的方法里触发一下表格的refreshData()方法即可解决此问题。
测试环境测试通过了，生产环境出问题
软件测试入门&进阶
06-06 4124
群友问：测试环境测试通过了，生产环境出问题Bigder：生产环境出问题有几个原因1、部署原因：生产环境代码，不是测试环境验证通过的代码2、配置原因：生产环境配置出问题3、测试漏测：测试未覆盖，测试环境也没有覆盖到、生产环境暴露问题4、临时变更：发布生产环境前、临时变革需求点、时间紧、任务急、难覆盖全以上，Bigder往期文章Linux常用实用技能总结测试基础&进阶软件测试入门软件测试面试怎样介绍自己的测试项目？会问到什么程度？简单易用的页面性能测试工具：Google浏览器自带的页面性能插件Performan
【bug】【vxe-table】设置固定列，表头后端返，样式错乱已解决
花椒和蕊的博客
01-13 5253
【bug】【vxe-table】设置固定列，表头后端返，样式错乱已解决
使用vxe-table遇到的问题
anqiaoyun的博客
11-27 1394
使用vxe-table时遇到的问题
关于elementui this.$refs[“form“].validate校验消失的原因
weixin_48090015的博客
10-24 1840
在表单提交的时候遇到elementui 提交点击确认后却没有显示任何成功或者失败的信息，原因大概率是在表单中rules使用了自定义校验，而elementui中自定义校验一定要有callback()，添加之后得以提交表单。
vxe-table 一个pc端表格组件库
weixin_47353884的博客
03-23 3856
获取当前表格的数据（完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据）只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件。遇到一个问题 在table中的下拉框 层级太低 显示不出来。因为vxe的数据不同步 我们可以通过这个方法同步一下值。把vxe-table进行全局安装 main.js引入。deep穿透或者是各种层级调整都不太好用。可以这样试试 在引入的地方修改层级~
vxe-table嵌套vxe-table,里面的vxe-table如何获取外层vxe-table的row?
02-24
在vxe-table中嵌套vxe-table时，内层的vxe-table可以通过作用域插槽（scoped slot）来获取外层vxe-table的row数据。具体步骤如下： 1. 在外层vxe-table的列定义中，使用作用域插槽（scoped slot）来传递row数据给内层vxe-table。例如，可以在外层vxe-table的列定义中添加一个自定义列，并使用作用域插槽将row数据传递给内层vxe-table，如下所示： ```html <vxe-table :data="outerData"> <vxe-column type="index" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column title="Nested Table"> <template #default="{ row }"> <vxe-table :data="row.nestedData"> <!-- 内层vxe-table的列定义 --> </vxe-table> </template> </vxe-column> </vxe-table> ``` 2. 在内层vxe-table的列定义中，可以通过作用域插槽（scoped slot）的方式获取外层vxe-table传递的row数据。例如，可以在内层vxe-table的列定义中使用作用域插槽来访问外层vxe-table的row数据，如下所示： ```html <vxe-table :data="nestedData"> <vxe-column field="nestedField1" title="Nested Field 1"></vxe-column> <vxe-column field="nestedField2" title="Nested Field 2"></vxe-column> <vxe-column title="Outer Row Data"> <template #default="{ $table }"> <!-- 使用 $table.$scoped.row 获取外层vxe-table的row数据 --> <span>{{ $table.$scoped.row }}</span> </template> </vxe-column> </vxe-table> ``` 通过以上步骤，内层的vxe-table就可以获取到外层vxe-table的row数据，并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值