生成一个嵌套输入框的表格，不需要接收数据，只需要填写然后组成json串上送,使用vue3,setup，可以实现增删功能，表格第一列第一行默认为主要，后面几行为次要

在Vue3中，你可以使用`setup()`函数结合`v-model`和`<template>`来创建一个嵌套输入框的表格，同时支持增删功能。这里是一个基本的示例：

<template>
  <table>
    <tr>
      <th v-if="!isAdding">主要</th>
      <th v-for="(item, index) in secondaryColumns" :key="index">{{ item.title }}</th>
    </tr>
    <tr v-for="(row, rowIndex) in rows track-by: $index" :key="rowIndex">
      <td @click="toggleIsMain(rowIndex)" :class="{ mainRow: row.isMain }">{{ row.isMain ? '主要' : '次要' }}</td>
      <td v-for="(colData, colIndex) in rowDetails[rowIndex]" :key="colIndex" v-model="colData.value">{{ colData.value }}</td>
      <td><button @click="removeRow(rowIndex)">删除</button></td>
    </tr>
    <tr v-if="isAdding">
      <td colspan="2"><input type="text" v-model="newRowTitle" placeholder="请输入新行"></td>
      <td><button @click="addRow()">添加</button></td>
    </tr>
  </table>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 初始化数据
let newRowTitle = ref('');
let rows = ref([{ isMain: true, details: [] }]);
let secondaryColumns = ref(['列1', '列2', '列3']); // 根据实际需求替换

// 增删行操作
function toggleIsMain(rowIndex) {
  rows[rowIndex].isMain = !rows[rowIndex].isMain;
}

function addRow() {
  if (newRowTitle.value.trim()) {
    let newDetail = {};
    rows.push({ isMain: false, details: [newDetail] });
    newRowTitle.value = '';
  }
}

function removeRow(rowIndex) {
  rows.splice(rowIndex, 1);
}

onMounted(() => {
  rows.value[0].isMain = true; // 设置默认第一行为主要
});
</script>

<style scoped>
.mainRow {
  background-color: #f0ad4e;
}
</style>

在这个例子中，我们首先初始化了一个新行标题、一行默认为主的主要数据以及一数组表示次要列的标题。`toggleIsMain`方法用于切换某一行是否为主要，`addRow`用于添加新行并清除输入框内容，`removeRow`用于移除指定行。

当你点击“添加”按钮时，会检查输入框的内容，如果非空则添加一条新的次要行。当鼠标悬停在第一列的单元格上时，单元格会切换显示“主要”或“次要”。

注意，这是一个基础示例，你可能需要根据实际情况调整样式、表头处理以及其他业务逻辑。同时，你需要将这些值转换成JSON字符串以便发送到服务器，可以使用`JSON.stringify()`函数。