在遇到表格内的表单控件错误提示被遮挡时，传统解决方案无法满足需求。通过分析z-index无效的原因，发现日期选择器的下拉部分通过定位能正常显示。于是尝试修改错误提示的定位参考，使其能够浮在表格之上。通过在Vue中创建自定义指令，动态修改元素样式，成功解决了问题。最后进行优化，只在插入时执行样式绑定，提高效率。
问题描述
在表格内使用表单时，如果表单控件在表格每一行的高度范围内，那么它的错误提示就会被遮挡看不到。（我的UI库是用的iview）
这是一直存在的问题，以前的解决方法：
- 将表单控件的错误提示距离留出来，把表格每一行撑高。这样表格每两行之间会间隔很大，还可能会出现一行的内容对不齐的问题
- 把错误提示放到表单控件里来，这样有时又影响查看内容。
原本想着反正我们是中台系统，这次还是准备用第一种方式继续蒙混过关，但是没想到这次的需求表格是带颜色的，加上颜色第一种方案缺点就太明显了，并且产品又不接受第二种方案，该改还是得要去改啊。
分析
1. z-index
像这种被遮挡的内容，第一时间想到的就是设置z-index提升层级，但是无论我怎么设置，z-index都等于9999了也不生效，真是令人头秃。
在百般搜索后，看到有人说： “表格的z-index不管怎么设置，<td>的层级都是高于<td>的内容元素的层级”。
那么我这设置z-index的方案是彻底宣布失败了。
2. position
不过这倒是令我想通了日期选择器的下拉部分为什么能正常显示。
可以看到日期选择器的选择部分是生成在<body>里的，相对定位自然是相对于<body>，那么可以浮在表格上就很正常。(其实我之前想拿日期选择器做参考已经看过了，但是一直没回过味来，现在才一下想通)
让我重新生成元素这是不可能的，但是使用定位又给了我一个思路：
如果我把错误提示的定位参考从它的父元素改到<body>，那是否也能如 日期选择器的选择部分那样通过计算到<body>的位置而展示呢？
好的！那就先在浏览器上修改尝试一下。
先取消错误提示(.ivu-form-item-error-tip)父元素(.ivu-form-item-content)的绝对定位，再修改.ivu-form-item-error-tip的top、left属性为0，方便查找。这时.ivu-form-item-error-tip找到设置了绝对定位的.ivu-table-wrapper，已经改变位置了。
再修改一下.ivu-form-item-error-tip的top属性，发现能正常显示在两行表格之间，证明这个方案没问题，可以照这样去做。
修改代码，测试效果
要操作多个元素，且方法都是一样的，那么用vue的自定义指令是最方便的。(vue自定义指令不多做赘述，参考官网：
最低0.47元/天 解锁文章
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
