问题描述
目标
我想要一个可编辑且看起来“不错”的 v-data-table。
问题
添加 v-text-field 以使其可编辑也会将行高增加到非常令人不快的程度
原图：
使用 v-text-field 输入
问题
如何降低行高以使其类似于没有 v-text-fields 的行高。
作为奖励
因为我对整个前端开发类事物很陌生，我将如何确定导致这种“高度问题”的原因？
PS：我尝试添加一个 JSfiddle，但我什至无法弄清楚如何正确显示 v-data-table...
可以找到基本草案here
解决方法
您的表格是否必须在列内可编辑？您如何决定何时通过请求将数据传回后端？用户离开字段后？
如果不需要在表格中设置编辑选项，我将只使用表格中已有的操作按钮来触发一个模式，您可以在其中编辑字段。这也允许您在用户提交请求之前进行适当的表单控制。还有一个 Vuetify Codepen，其中包含如何执行此操作的示例 Codepen
如果有必要，您应该将 v-data-table 实现为 v-data-iterator，这在功能方面本质上是相同的，但允许完全控制外观。 https://vuetifyjs.com/en/components/data-iterators/
至于如何识别 v-text-field 高度的问题，您必须使用浏览器开发工具。然后你会意识到输入有默认的填充和边距，但在引擎盖下还有很多。它例如为弹出错误消息和在字段上方显示标签分配空间。
以及如何修复您的 JSfiddle，您可以在 CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn 下的 vuetify 文档的入门部分阅读。