vue+elementui表格编辑

要在Vue和Element UI中实现表格编辑，可以使用Element UI提供的el-table组件以及Vue的数据绑定和计算属性。

首先，在Vue中定义表格的数据，例如：

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Mary', age: 30, gender: 'Female' },
      { name: 'Bob', age: 40, gender: 'Male' },
      { name: 'Alice', age: 35, gender: 'Female' }
    ]
  }
}

然后，在模板中使用el-table组件来显示数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
  </el-table>
</template>

这将显示一个表格，其中包含三列：Name、Age和Gender，并使用tableData中的数据进行填充。

要让表格可以编辑，可以添加一个编辑按钮，并在单击时将表格的行设置为可编辑状态：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="text" @click="handleEdit(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male', isEditing: false },
        { name: 'Mary', age: 30, gender: 'Female', isEditing: false },
        { name: 'Bob', age: 40, gender: 'Male', isEditing: false },
        { name: 'Alice', age: 35, gender: 'Female', isEditing: false }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      row.isEditing = true
    }
  }
}
</script>

在这个例子中，我们添加了一个isEditing属性来跟踪行是否处于编辑状态，并将其初始值设置为false。当用户单击编辑按钮时，我们将isEditing设置为true。

接下来，我们需要创建一个编辑表单，以便用户可以在其中编辑行数据。我们可以使用el-form组件来实现这一点：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="text" @click="handleEdit(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-dialog :visible.sync="dialogVisible">
    <el-form :model="currentRow" label-width="100px">
      <el-form-item label="Name">
        <el-input v-model="currentRow.name"></el-input>
      </el-form-item>
      <el-form-item label="Age">
        <el-input v-model="currentRow.age"></el-input>
      </el-form-item>
      <el-form-item label="Gender">
        <el-radio-group v-model="currentRow.gender">
          <el-radio label="Male">Male</el-radio>
          <el-radio label="Female">Female</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="handleSave">Save</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male', isEditing: false },
        { name: 'Mary', age: 30, gender: 'Female', isEditing: false },
        { name: 'Bob', age: 40, gender: 'Male', isEditing: false },
        { name: 'Alice', age: 35, gender: 'Female', isEditing: false }
      ],
      dialogVisible: false,
      currentRow: {}
    }
  },
  methods: {
    handleEdit(row) {
      this.currentRow = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleSave() {
      // Save changes to database or update tableData directly
      this.dialogVisible = false
    }
  }
}
</script>

在这个例子中，我们添加了一个el-dialog组件，其中包含一个el-form，用于编辑行数据。我们还添加了一个dialogVisible属性来控制对话框的可见性，并用currentRow属性存储当前正在编辑的行数据。

当用户单击编辑按钮时，我们将当前行数据复制到currentRow中，并将dialogVisible设置为true，以显示编辑对话框。当用户单击保存按钮时，我们可以将更改保存到数据库或直接更新tableData。

最后，在el-table组件中，我们需要根据每行的isEditing属性来决定是否显示编辑表单或显示原始数据。我们可以使用Vue的计算属性来实现这一点：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="text" @click="handleEdit(scope.row)">Edit</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-dialog :visible.sync="dialogVisible">
    <el-form :model="currentRow" label-width="100px">
      <el-form-item label="Name">
        <el-input v-model="currentRow.name"></el-input>
      </el-form-item>
      <el-form-item label="Age">
        <el-input v-model="currentRow.age"></el-input>
      </el-form-item>
      <el-form-item label="Gender">
        <el-radio-group v-model="currentRow.gender">
          <el-radio label="Male">Male</el-radio>
          <el-radio label="Female">Female</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="handleSave">Save</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male', isEditing: false },
        { name: 'Mary', age: 30, gender: 'Female', isEditing: false },
        { name: 'Bob', age: 40, gender: 'Male', isEditing: false },
        { name: 'Alice', age: 35, gender: 'Female', isEditing: false }
      ],
      dialogVisible: false,
      currentRow: {}
    }
  },
  methods: {
    handleEdit(row) {
      this.currentRow = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleSave() {
      // Save changes to database or update tableData directly
      this.dialogVisible = false
    },
    handleDelete(row) {
      // Delete row from database or tableData directly
    }
  },
  computed: {
    computedTableData() {
      return this.tableData.map(row => {
        if (row.isEditing) {
          return this.currentRow
        } else {
          return row
        }
      })
    }
  }
}
</script>

在这个例子中，我们使用computed属性computedTableData来根据每行的isEditing属性返回tableData的副本，其中正在编辑的行被替换为currentRow。然后，我们在el-table组件中使用computedTableData而不是tableData来显示数据。

这样，我们就可以在Vue和Element UI中实现表格编辑了。