vue3 - element plus表格内实现行内直接编辑输入框、单选/多选框、复选框等数据并且自动更新，在表格组件每行里嵌套可直接修改编辑的输入框，失去焦点时自动更新数据（提供源码，一键复制即用）

在Vue 3和Element Plus中，可以使用el-table结合el-input, el-select, el-radio, 和el-checkbox等组件来实现行内直接编辑。以下是一个简单的例子，展示了如何在表格的某一列中直接进行编辑：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="{ row }">
        <el-input v-model="row.name" @change="handleEdit(row)" />
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <el-select v-model="row.status" placeholder="请选择" @change="handleEdit(row)">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    status: 'active'
  },
  // ... 更多数据
]);
 
const statusOptions = ref([
  { label: '激活', value: 'active' },
  { label: '禁用', value: 'inactive' }
]);
 
const handleEdit = (row) => {
  // 处理编辑逻辑，例如更新数据库等
  console.log('编辑后的数据:', row);
};
</script>

在这个例子中，我们定义了一个tableData响应式数据，它包含了日期、姓名和状态等字段。在el-table-column中使用#default插槽来自定义列的内容，使用el-input、el-select等组件实现行内编辑。当编辑完成后，调用handleEdit函数来处理编辑后的数据。

请注意，这个例子仅展示了如何实现行内编辑，并未包含数据库更新等复杂逻辑。在实际应用中，你需要根据自己的后端API来实现数据的更新。