uni-app uni-table 表格中插入输入框踩坑记录

于 2024-01-25 15:54:46 发布
阅读量457 收藏 9
点赞数 7
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42119042/article/details/135846560
版权

需求 表格中有部分数据可输入 

切记：uni-td 标签中不要随意加其他class属性 不然会引起格式错乱

我加了个居中样式

结果表格直接错位 麻了

渔思鱼
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app - 详细实现树形结构选择器组件（支持单选 / 多选 / 可选择父级 / 弹框形式）树形控件 tree 无限级节点树，树插件完整源码，最好用的组件教程
王佳斌
11-07 1万+
uni-app 实现无限级树形结构组件，uniapp无限树形结构，uniapp无限级树形结构组件,多选组件,支持搜索，关于vue.js:uniapp如何实现无限级树形结构组件，uniapp无限级树形结构组件，多选组件，无限树状组件的实现，uni-app官方插件，最好用的树形结构three组件树，很好用的uni-app节点树组件教程，uni-app兼容H5 app 小程序的树形节点树插件组件，UNIAPP怎么实现树形解构可展开折叠的组件。uni-app - 树形结构组件（支持展示、单选、多选、多选联动、展开折
uni-app中table组件表格头固定
weixin_46573073的博客
09-23 7194
分别给表格标题和body加上一层view标签,要注意body表格的宽度要加view标签单独根据表头的宽度来设置。初级小码农,有不对的地方,包涵指教。简单的table表格顶部固定。
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成输入框修改数据
seeeeeeeeeee的博客
02-02 8162
这是最近遇到的功能，经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据，修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法，其实也比较简单就是通过角标来判断显示隐藏的。
uniapp table 组件
热门推荐
wwf1225的博客
06-16 2万+
uniapp table 组件 https://segmentfault.com/a/1190000019975326?utm_source=tag-newest uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios android wap，小程序，除了android有点卡外，其他暂时没有发现什么瑕疵。 最近在捣鼓uniapp项目，恰好用到table组件，之前写了个demo，后面一直都想写一个像样的，可以分享给别人用的组件。 自己的水平一般，开发出来的组件可能代码.
uni-table 表格的封装
Whit3ZzT的博客
06-20 1436
在实际的应用场景中，表格是一个非常常见的需求，如果每一个的表格都自己去手写的话非常的浪费时间，并且当中的代码冗余量非常大，所以很有必要进行封装。到这里的话基本上的表格封装就完成了，如果说还有其他的需求的话我这里没有写到也可以自行根据需求进行改造。此时基本就完成了表格的渲染，但是假如还需要操作列时，这个时候每一行的操作列都是空的，因为这里。这里的表头、表体、以及操作都是动态的，主要实现的方法在后续会进行讲解。循环渲染表头的每一列，这里的话表头就完成渲染了。中是不会保存操作列的数据的，所以需要传入一个。
uniapp-table中改版uni-table插件
07-03
在 UniApp 中，`uni-table` 是一个用于展示数据表格的组件，它提供了基础的数据展示和操作功能。然而，随着项目需求的多样化，有时我们需要对原生组件进行扩展和定制以满足特定场景的需求。 标题"uniapp-table中...
uni-app table表格
10-26
在uni-app框架中，`table`组件是一种用于展示数据的常用元素，尤其在处理列表或者表格数据时。uni-app是一个跨平台的前端开发框架，它允许开发者使用Vue.js语法编写代码，一次编写，多端运行，包括iOS、Android、H5...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app调用Android原生可以实现通信及打开WiFi
01-13
在uni-app中，通过调用原生插件，我们可以实现与Android系统更深度的交互，比如控制WiFi的开启与关闭，以及其他一些特定的硬件操作。\n\n1. **调用原生插件原理**\n 在uni-app中，调用Android原生功能主要是通过`uni...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
封装uniapp-uni-table组件，获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
05-23 6138
封装uniapp-uni-table组件，点击行事件，传入表头，传入数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
uniapp - 商品详情展示-table风格1
Listest的博客
11-23 1455
1.效果图 2.代码如下 <template> <view class="container"> <u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="true" :back-text-style="{'color':'#fff'}" :background="background" :c
uniapp、微信小程序--自定义table
最新发布
lingrer的博客
11-29 983
最开始是用Uview写的表格 但是发现属性太少了，首先就是不能取消横竖边框，最后就是没有办法改变每一行的背景颜色，他只有th-style改变表头的背景颜色。然后我选择用uni-ui的表格组件，发现他可以取消竖的边框 但是还是不能改变每一行的背景颜色，使用deep穿透也不行，最后采用view原生写法。啥先不说直接看效果吧。
uni-app-使用tkiTree组件实现树形结构选择(​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内)
路虽远行则将至，事虽难做则必成。
08-04 3077
在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）
封装uniapp-uni-table组件，（其中按钮利用插槽自定义插入）获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
11-28 1235
表格内部的按钮，利用了作用域插槽，实现组件中数据向引用组件进行传值从而获取行内数据table组件👇 其中定义slot插槽 ，表格上方的按钮插槽名outSideBtn，表格内部的按钮插槽名bodyIndex。
【uniapp】Table固定首行、列，能够分级
jijunqing321的博客
01-27 8259
已将前期写的uniapp表格组件封装成组件，上传至uniapp组件库。可以根据以下api进行使用，此组件只适用于app端（因为浏览器环境就可以正常写了，不用这么麻烦）。 组件地址：添加链接描述 Table 固定首列、首行 主要提供能table首列、首行功能 根据主题颜色变化： 属性 值类型 说明 tableHeader object 固定首行时，头部数据 classifyData object 传入的最左侧大分类数据 headerKey string 当不使用slot修改头
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
lanbaiyans的博客
04-10 4407
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
uniapp 之 uni-table组件添加行点击事件
web13639198675的博客
02-23 4366
uniapp 之 uni-table组件添加行点击事件 第一种方案（不改变导入的 tr 组件） 第二种方案（改变 tr 组件） 写在末尾 由于 uniapp官网的uni-table组件 并没有给出添加行点击事件的events，于是自己想方法基于uni-table组件实现了表格行点击事件； 第一种方案（不改变导入的 tr 组件） <uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行
uniapp 树形结构选择器
weixin_53561783的博客
02-01 4052
改造，可以实现多选或者单选，我上面示例为单选，上面的tab导航头是可以点击回退的，这个插件的优势在于，正常的树形结构的数据非常多，移动端拉取数据太多或导致页面卡顿，我用了好几款插件体验度都不是很友好，这款插件它是一个新的路由页面不同一般的弹窗页面类似，能很好的避免页面卡顿，第一次加载过长的问题，因为我是一个单独的页面，防止遗漏我会把我的全部页面功能全部贴出来，有的和组件无关的，需要自己手动删除一下。查看项目目录uni_modules 下面是否有相对于的导入的包文件。前往插件市场导入完整插件包代码。
uni-app中手写table表格
05-27
在uni-app中手写表格可以使用HTML表格标签进行实现。以下是一个简单的例子： ```html <view class="table-container"> <table> 姓名 年龄 性别 张三 <td>25 男 李四 <td>30 女 王五 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值