vue3封装el-table其内部拥有编辑删除

首先，你可以使用 Vue3 Composition API 来封装一个基本的 el-table 组件。在这个组件中，你可以定义一个数据源，以及一些列用于编辑和删除数据的方法。

下面是一个简单的例子：

<template>
  <el-table :data="tableData" stripe>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Operation">
      <template #default="{row}">
        <el-button type="primary" size="small" @click="edit(row)">Edit</el-button>
        <el-button type="danger" size="small" @click="remove(row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const tableData = reactive([
      { name: 'John', age: 22 },
      { name: 'Mary', age: 26 },
      { name: 'Peter', age: 30 },
    ])

    const edit = (row) => {
      // 编辑方法
    }

    const remove = (row) => {
      // 删除方法
    }

    return {
      tableData,
      edit,
      remove,
    }
  },
}
</script>

在这个例子中，我们使用了 Vue3 Composition API 中的 `reactive` 方法来创建一个响应式的数据源 `tableData`，并在组件的 `setup` 方法中定义了 `edit` 和 `remove` 两个方法。

接下来，你需要在 `edit` 和 `remove` 方法中实现编辑和删除数据的逻辑。你可以使用 el-dialog 组件来实现编辑数据的功能，使用 `splice` 方法来删除数据。

下面是一个简单的实现：

<template>
  <el-table :data="tableData" stripe>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Operation">
      <template #default="{row}">
        <el-button type="primary" size="small" @click="edit(row)">Edit</el-button>
        <el-button type="danger" size="small" @click="remove(row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="Edit" :visible.sync="dialogVisible">
    <el-form :model="form" :rules="rules">
      <el-form-item label="Name" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Age" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="save">Save</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    const tableData = reactive([
      { name: 'John', age: 22 },
      { name: 'Mary', age: 26 },
      { name: 'Peter', age: 30 },
    ])

    const editIndex = ref(-1)
    const dialogVisible = ref(false)
    const form = reactive({
      name: '',
      age: '',
    })
    const rules = reactive({
      name: [{ required: true, message: 'Please input name', trigger: 'blur' }],
      age: [{ required: true, message: 'Please input age', trigger: 'blur' }],
    })

    const edit = (row) => {
      editIndex.value = tableData.indexOf(row)
      form.name = row.name
      form.age = row.age
      dialogVisible.value = true
    }

    const remove = (row) => {
      tableData.splice(tableData.indexOf(row), 1)
    }

    const save = () => {
      const valid = validateForm()
      if (valid) {
        tableData[editIndex.value] = { ...form }
        dialogVisible.value = false
      }
    }

    const validateForm = () => {
      return new Promise((resolve, reject) => {
        const formRef = formRef.value
        formRef.validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }

    return {
      tableData,
      edit,
      remove,
      dialogVisible,
      form,
      rules,
      save,
    }
  },
}
</script>

在这个例子中，我们使用了 Vue3 Composition API 中的 `ref` 方法来创建了两个响应式变量 `editIndex` 和 `dialogVisible`，分别用于记录当前编辑的数据索引和 el-dialog 组件的显示状态。我们还使用了 `reactive` 方法来创建了一个响应式对象 `form` 和一个响应式规则对象 `rules`，用于实现表单验证功能。

在 `edit` 方法中，我们将当前编辑的数据索引赋值给 `editIndex` 变量，并将当前数据的值赋给表单数据 `form`，然后将 el-dialog 组件的显示状态设置为 true，从而显示编辑对话框。

在 `remove` 方法中，我们使用 `splice` 方法来删除当前数据。

在编辑对话框中，我们使用 el-form 组件和 el-input 组件来实现表单输入功能。在保存数据时，我们先使用 `validateForm` 方法来验证表单数据是否合法，如果合法，则将表单数据保存到数据源中，并将 el-dialog 组件的显示状态设置为 false，从而关闭编辑对话框。

需要注意的是，在这个例子中，我们使用了 el-dialog 组件来实现编辑数据的功能，这是因为 el-table 组件本身并不提供编辑数据的功能。如果你想要实现原生的编辑功能，你可能需要自己实现一些相关的逻辑。