vue3 element-plus 实现表格数据更改功能
【代码】vue3 element-plus 实现表格数据更改功能。
·
在 vue3 中使用 element-plus 实现表格数据更改功能,可以通过以下步骤实现:
- 导入 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 实现表格数据更改功能的全部步骤。
更多推荐
已为社区贡献6条内容
所有评论(0)