vue3 element-plus 实现表格数据更改功能详细步骤
作者：无妄的罪
这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在 vue3 中使用 element-plus 实现表格数据更改功能，可以通过以下步骤实现：
1.导入 element-plus 的 Table、Form 和 Input 组件，并在组件中引入表格数据：
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<el-table-column>
<template #default="{row}">
<el-button @click="editRow(row)">Edit</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<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.number="form.age"></el-input>
</el-form-item>
<el-form-item label="Address" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="submitForm">Save</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
export default {
components: {
ElTable,
ElTableColumn,
ElButton,
ElDialog,
ElForm,
ElFormItem,
ElInput,
},
setup() {
const tableData = ref([
{
name: 'John',
age: 30,
address: 'New York',
},
{
name: 'Jane',
age: 25,
address: 'San Francisco',
},
{
name: 'Bob',
age: 40,
address: 'Dallas',
},
]);
const form = ref({});
const dialogVisible = ref(false);
const rules = {
name: [
{ required: true, message: 'Please input name', trigger: 'blur' },
],
age: [
{ required: true, message: 'Please input age', trigger: 'blur' },
{ type: 'number', message: 'Age must be a number', trigger: 'blur' },
],
address: [
{ required: true, message: 'Please input address', trigger: 'blur' },
],
};
const editRow = (row) => {
form.value = { ...row };
dialogVisible.value = true;
};
const submitForm = () => {
const formRef = this.$refs.form;
formRef.validate((valid) => {
if (valid) {
const dataIndex = tableData.value.indexOf(form.value);
const tableDataCopy = [...tableData.value];
tableDataCopy.splice(dataIndex, 1, form.value);
tableData.value = tableDataCopy;
dialogVisible.value = false;
}
});
};
return {
tableData,
form,
dialogVisible,
rules,
editRow,
submitForm,
};
},
};
</script>- 在表格中添加一个“编辑”按钮，点击该按钮会弹出一个对话框，用于修改表格行的数据。
- 在对话框中添加一个表单，用于输入修改后的数据。
- 在对话框的“保存”按钮上绑定一个 submitForm 方法，用于提交表单数据。在 submitForm 方法中，可以先对输入的数据进行验证，如果验证通过，则将修改后的数据更新到表格中，同时关闭对话框。
以上就是使用 element-plus 实现表格数据更改功能的全部步骤。
到此这篇关于vue3 element-plus 实现表格数据更改功能的文章就介绍到这了,更多相关vue3 element-plus 表格数据更改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！