【无标题】由于chat GPT写的vue＋elementui 简单增删改查表格

原创已于 2023-02-16 08:24:14 修改 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2023-01-18 23:35:48 首次发布

本文详细介绍了如何结合Vue.js和ElementUI库，快速构建一个具备基本增删改查功能的数据表格。通过实例代码，展示了如何绑定数据、监听事件以及操作表格元素，帮助前端开发者提升开发效率。

<template>
    <div>
        <el-input v-model="searchText" placeholder="搜索"></el-input>
        <el-button type="primary" @click="addRow">添加行</el-button>
        <el-table :data="filteredTableData" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="editRow(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" @click="deleteRow(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogVisible">
            <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRow">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 18 },
                { name: '李四', age: 22 },
                { name: '王五', age: 30 },
            ],
            dialogVisible: false,
            form: {
                name: '',
                age: '',
            },
            editIndex: null,
            searchText: '',
        };
    },
    computed: {
        filteredTableData() {
            if (this.searchText) {
                return this.tableData.filter(row => {
                    return row.name.toLowerCase().includes(this.searchText.toLowerCase());
                });
            } else {
                return this.tableData;
            }
        },
    },
    methods: {
        addRow() {
            this.form.name = '';
            this.form.age = '';
            this.dialogVisible = true;
            this.editIndex = null;
        },
        editRow(index, row) {
            this.form.name = row.name;
            this.form.age = row.age;
            this.dialogVisible = true;
            this.editIndex = index;
        },
        saveRow() {
            if (this.editIndex !== null) {
                this.tableData.splice(this.editIndex, 1, {
                    name: this.form.name,
                    age: this.form.age,
                });
            } else {
                this.tableData.push({
                    name: this.form.name,
                    age: this.form.age,
                });
            }
            this.dialogVisible = false;
        },
        deleteRow(index) {
            this.tableData.splice(index, 1);
        },
    },
};
</script>