vue3+element-plus表格自定义输入

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <!-- 表头 -->
        <template #header>
          <span v-if="item">{{ item }}</span>
          <el-input @change="handleHeader" v-model="headerCont" v-else/>
        </template>
        <!-- 内容 -->
        <template #default="scope">
          <el-input v-model="scope.row[item]" @input="(val) => {handleAddRowData(val, item, scope.row)}"/>
        </template>
      </el-table-column>
      </el-table>
      <el-button @click="handleAddHeader">添加表头</el-button>
      <el-button @click="handleAddRow">添加行</el-button>

js

// 表头
const tableHeader = ref(['价格', '库存'])
// 表格数据
const tableData = ref([{
  '价格': '100',
  '库存': '100',
  idx: 1
},])
// 收集表头的数据
const headerCont = ref('')

// 添加表头
const handleAddHeader = () => {
  if(!tableHeader.value.every(item => !!item)) return ElMessage.error('请先填写表头内容')
  tableHeader.value.unshift('')
}
// 将表头更新 && 将表格数据更新
const handleHeader = (val) => {
  tableHeader.value.splice(0, 1, val)
  tableData.value = tableData.value.map(item => {
    return {...item, [val]: ''}
  })
  headerCont.value = ''
}

// 添加行
const handleAddRow = () => {
  const newTabelData = {}
  tableHeader.value.forEach(item => {
    newTabelData[item] = ''
  })
  newTabelData.idx = tableData.value.length+1
  tableData.value.push(newTabelData)
}

const handleAddRowData = (val, type, row) => {
  tableData.value = tableData.value.map(item => {
    if (item.idx === row.idx) {
      item[type] = val
    }
    return item
  })
}


// 获取表格数据
const handleClick = () => {
  const isOptions = ['库存', '价格']
  // 筛选的表格数据
  const subMitTable = tableHeader.value.map(item => {
    if (!isOptions.includes(item)) {
      const select = tableData.value.map(item1 => {
        return item1[item]
      })
      return {title: item, subTitle: select}
    }
  }).filter(item => !!item)
  console.log(subMitTable);
  console.log(tableData.value);
}