Используйте пользовательские инструкции vue, чтобы решить проблему, связанную с тем, что настройка z-index элемента содержимого table td не действует.

описание проблемы

При использовании формы в таблице, если элемент управления формы находится в пределах диапазона высоты каждой строки таблицы, его сообщение об ошибке будет скрыто от просмотра. (Моя библиотека пользовательского интерфейса использует iview)
Не удается отобразить содержимое подсказки формы

Вот постоянная проблема, предыдущие обходные пути:

Оставьте ошибку подсказки на расстоянии от элемента управления формы и поддержите каждую строку формы. Таким образом, между каждыми двумя строками таблицы будет большой разрыв, и может возникнуть проблема несовпадения содержимого строки.
Поместите подсказку об ошибке в элементе управления формой, что иногда влияет на просмотр содержимого.

Я изначально думал, что мы все равно система среднего уровня, и на этот раз я собирался использовать первый метод, чтобы продолжить карабкаться, но я не ожидал, что форма спроса на этот раз будет цветной, а недостатки первое решение с цветами слишком очевидно, а второе решение продукт не принимает, поэтому его следует изменить.

анализировать

1. z-индекс

Для такого закрытого контента первое, о чем я думаю, это установить z-индекс для повышения уровня, но как бы я его не устанавливал, z-индекс равен 9999 и это не действует, что на самом деле лысый.
Поискав разными способами, я увидел, как кто-то сказал: «Независимо от того, как установлен z-индекс таблицы, <td>уровень таблицы выше <td>уровня элемента содержимого» .
Тогда мой план установить z-index — полный провал.

2. позиция

Но это заставило меня понять, почему раскрывающаяся часть средства выбора даты может отображаться нормально.

Видно, что часть выбора средства выбора даты генерируется внутри <body>, а относительное позиционирование, естественно, является относительным <body>, поэтому возможность плавать на столе — это нормально. ( _{Вообще-то я и раньше хотел использовать селектор даты как референс, но не вспомнил, а разобрался только сейчас} )
элемент раскрывающегося списка выбора даты

Я не мог регенерировать элемент, но использование позиционирования натолкнуло меня на другую идею:

Если я изменю ссылку на позиционирование подсказки об ошибке с ее родительского элемента на <body>, может ли она также отображаться через вычисляемую позицию, такую как часть выбора средства выбора даты ?<body>

ХОРОШО! Затем попробуйте сначала изменить его в браузере.

Сначала отмените абсолютное позиционирование .ivu-form-item-error-tipродительского элемента ( ) сообщения об ошибке ( ), а затем измените атрибуты top и left на 0 для облегчения поиска. В это время обнаружено, что установлено абсолютное позиционирование , и положение было изменено..ivu-form-item-content.ivu-form-item-error-tip.ivu-form-item-error-tip.ivu-table-wrapper
Изменить ссылки относительного позиционирования

Снова измените .ivu-form-item-error-tipверхний атрибут и обнаружите, что он может нормально отображаться между двумя строками таблиц, что доказывает, что это решение не проблема, и вы можете сделать это следующим образом.
Отрегулируйте значение верхнего атрибута

Измените код и проверьте эффект

Для работы с несколькими элементами, а методы одинаковы, удобнее всего использовать пользовательские инструкции vue. (Пользовательские директивы Vue не вдаются в подробности, обратитесь к официальному сайту: https://cn.vuejs.org/v2/guide/custom-directive.html )

Определите инструкцию v-tableformerrorpositionдля изменения стиля нескольких соответствующих элементов при появлении сообщения об ошибке и зарегистрируйте ее в vue.

...省略...
Vue.directive('tableformerrorposition', {
    
    
  update: function(el) {
    
    
    const classList = el.getAttribute('class').split(' ')
    // 判断是否出现错误提示
    if (classList.includes('ivu-form-item-error')) {
    
    
       // 这是ivu-form-item-content
       let contentEl = el.children[0]
       // 这是ivu-form-item-error-tip
       let errTipEl = contentEl.children[1]
      // 在浏览器测试时找到`<table>`去设置定位还是太麻烦，可以尝试找到父级表格`<td>`去修改定位，这里就直接找到<td>元素
      let parentTdEl = el.parentNode.parentNode.parentNode
      
      // ivu-form-item-content取消绝对定位
      contentEl.setAttribute('style', 'position:static;')
      // <td>加上绝对定位
      parentTdEl.setAttribute('style', 'position:relative;')
      // ivu-form-item-error-tip调整相对定位距离
      errTipEl.setAttribute('style', 'top:44px;')
    }
  },
})
...省略...

Используйте директивы на странице

...省略...
<Form ref="chargForm" :model="chargForm" :label-width="120">
  <Table class="table-list" :columns="chargColumns" max-height="600" :data="chargForm.list">
    <template slot-scope="{ index }" slot="firstMonths">
      <FormItem
       label=""
       :label-width="0"
       :prop="'list.' + index + '.firstMonths'"
       v-tableformerrorposition 
	  >
        <Input v-model="xxx" />
	  </FormItem>
	</template>
  </Table>
</Form>
..省略...

оптимизация

Приведенный выше код все еще можно оптимизировать.

Хотя сообщение об ошибке будет отображаться и скрываться, его положение не изменится, и пока его стиль установлен один раз, его не нужно менять обратно на предыдущий стиль. Поэтому нам не нужно изменять его при обновлении, нам нужно только выполнить модификацию привязки при вставке (при использовании вставки убедитесь, что родительский элемент существует).
Здесь нам нужно найти 3 элемента для модификации, по сути, мы можем написать класс, найти родительский элемент <td>и добавить к нему этот класс.
Если вы опасаетесь, что некоторые уровни формы одинаковы, вы также можете передать параметры и рекурсивно найти родительский элемент, который будет изменен в соответствии с параметрами (этот момент я не оптимизировал).

...省略...
Vue.directive('tableformerrorposition', {
    
    
  inserted(el) {
    
    
    // 找到<td>元素
    let parentTdEl = el.parentNode.parentNode.parentNode
    parentTdEl.className += ' update-form-item-error-position'
  },
})
...省略...

Посмотрите на конечный эффект:
вставьте сюда описание изображения