vue3 动态合并单元格并且 动态显示输入框或者下拉框 附（效果图）

在Vue 3中，你可以使用<template>元素和v-if、v-else-if、v-else指令来根据条件动态渲染不同的元素，比如单元格或输入框。以下是一个简化的例子，演示如何根据条件动态创建单元格，并在单元格中动态显示输入框或下拉框。

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <td v-for="(field, key) in item" :key="key">
        <!-- 动态创建单元格内容，根据key决定渲染输入框还是下拉框 -->
        <template v-if="key === 'select'">
          <!-- 下拉框 -->
          <select v-model="item[key]">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
          </select>
        </template>
        <template v-else>
          <!-- 输入框 -->
          <input v-model="item[key]" />
        </template>
      </td>
    </tr>
  </table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 假设每个item都有一个'select'字段，用于表示该行应该显示下拉框
    const items = ref([
      { name: 'John Doe', select: 'option1' },
      { age: 30, select: 'option2' },
      // 更多items...
    ]);
 
    return {
      items,
    };
  },
};
</script>

在这个例子中，我们使用了v-for来遍历items数组，并为每个item创建一行表格行。对于每个item的字段，我们使用v-if来判断是否是'select'字段，如果是，则渲染一个下拉框(<select>)，否则渲染一个输入框(<input>)。通过双向绑定(v-model)，我们可以保持数据和表单元素之间的同步。