要在
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="current
Row" label-width="100px">
<el-form-item label="Name">
<el-input v-model="current
Row.name"></el-input>
</el-form-item>
<el-form-item label="Age">
<el-input v-model="current
Row.age"></el-input>
</el-form-item>
<el-form-item label="Gender">
<el-radio-group v-model="current
Row.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,
current
Row: {}
}
},
methods: {
handleEdit(
row) {
this.current
Row = Object.assign({},
row)
this.dialogVisible = true
},
handleSave() {
// Save changes to database or update tableData directly
this.dialogVisible = false
}
}
}
</script>
```
在这个例子中，我们添加了一个el-dialog组件，其中包含一个el-form，用于编辑行
数据。我们还添加了一个dialogVisible属性来控制对话框的可见性，并用current
Row属性存储当前正在编辑的行
数据。
当用户单击编辑按钮时，我们将当前行
数据复制到current
Row中，并将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="current
Row" label-width="100px">
<el-form-item label="Name">
<el-input v-model="current
Row.name"></el-input>
</el-form-item>
<el-form-item label="Age">
<el-input v-model="current
Row.age"></el-input>
</el-form-item>
<el-form-item label="Gender">
<el-radio-group v-model="current
Row.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,
current
Row: {}
}
},
methods: {
handleEdit(
row) {
this.current
Row = 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.current
Row
} else {
return
row
}
})
}
}
}
</script>
```
在这个例子中，我们使用computed属性computedTableData来根据每行的isEditing属性返回tableData的副本，其中正在编辑的行被替换为current
Row。然后，我们在el-table组件中使用computedTableData而不是tableData来显示
数据。
这样，我们就可以在
Vue和Element UI中实现
表格编辑了。
385
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
