Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

在Vue中，可以使用事件监听器来实现鼠标移入移出时input的显示和隐藏功能。如果input中有输入值，则不隐藏。以下是一个简单的示例：

<template>
  <div>
    <table>
      <tr v-for="(item, index) in items" :key="index">
        <td>
          <input
            type="text"
            v-model="item.value"
            @mouseenter="showInput(index)"
            @mouseleave="hideInput"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { value: '' },
        { value: '已填写的值' },
        { value: '' }
        // 更多的items...
      ],
      activeIndex: null
    };
  },
  methods: {
    showInput(index) {
      this.activeIndex = index;
    },
    hideInput() {
      if (!this.items[this.activeIndex].value) {
        this.activeIndex = null;
      }
    }
  }
};
</script>

在这个示例中，我们有一个表格，每一行都有一个input元素。当鼠标移入input时，会触发showInput方法，记录当前input的索引。当鼠标移出时，如果input中没有输入值，则触发hideInput方法，重置activeIndex。activeIndex与v-if指令结合使用，决定是否显示input。