使用vue实现表格的增删改查

本文转载自查看原文 2020-05-20 13:10 3027 vue

使用vue脚手架搭建项目实现表格的crud （纯前端操作）

开发工具：WebStorm

主要技术：vue+Element-UI

项目目录结构如下：

TableData.vue代码（视图）如下：

<template>
    <div>
        <el-button type="success" plain @click="handleAddClick">增加</el-button>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>


            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleEditClick(scope.$index,scope.row)"  size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelClick(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改用户" :visible.sync="editBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="user">
                <el-form-item label="时间:">
                    <el-input placeholder="请输入时间" maxlength="50" v-model = "user.date"></el-input>
                </el-form-item>
                <!--                <el-form-item label="时间:">-->
                <!--                    <el-date-picker-->
                <!--                            v-model = "user.date"-->
                <!--                            type="date"-->
                <!--                            placeholder="选择日期">-->
                <!--                    </el-date-picker>-->
                <!--                </el-form-item>-->
                <el-form-item label="名字:">
                    <el-input placeholder="请输入名字" maxlength="50" v-model = "user.name"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input placeholder="请输入地址" maxlength="50" v-model = "user.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleEditUser">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加用户" :visible.sync="addBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="addUserData">
                <el-form-item label="时间:">
                    <el-date-picker v-model = "addUserData.date" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="名字:">
                    <el-input placeholder="请输入名字" maxlength="50" v-model = "addUserData.name"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input placeholder="请输入地址" maxlength="50" v-model = "addUserData.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleAddUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>


<script> export default { name: "TableData", data() { return { tableData: [{ date: '2016-03-02', name: '张三', address: '广州市天河区金沙江路 1518 弄' }, { date: '2016-04-06', name: '李四', address: '广州市黄埔区金沙江路 1517 弄' }, { date: '2016-08-01', name: '王五', address: '北京市金沙江路 1519 弄' }, { date: '2016-06-03', name: '赵六', address: '上海市普陀区金沙江路 1516 弄' }], addBox : false, editBox:false, user:{}, editIndex:"", addUserData:{ date : "", name : "", address : "" } } }, methods:{ handleEditClick(index,row){ this.editBox = true
                this.user = row this.editIndex = index }, // eslint-disable-next-line no-unused-vars
 handleDelClick(index,row){ this.$confirm('此操作将删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.tableData.splice(index,1) this.$message({showClose: true, message: "删除成功", type: 'success'}); }) }, handleClose(done) { done(); }, handleEditUser(){ this.tableData.splice(this.editIndex,1,this.user) this.$message({showClose: true, message: "修改成功", type: 'success'}); this.editBox = false }, handleAddClick(){ this.addBox = true }, handleAddUser(){ let strDate = dateFormat("YYYY-mm-dd",this.addUserData.date) this.addUserData.date = strDate this.tableData.push(this.addUserData) this.addBox = false
                this.addUserData = {} this.$message({showClose: true, message: "添加成功", type: 'success'}); } } } function dateFormat(fmt, date) { let ret; const opt = { "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒 // 有其他格式化字符需求可以继续添加，必须转化成字符串
 }; for (let k in opt) { ret = new RegExp("(" + k + ")").exec(fmt); if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) }; }; return fmt; } </script>

<style scoped>

</style>

路由 index.js 代码如下：

import Vue from 'vue' import VueRouter from 'vue-router' import TableData from '../views/TableData.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'TableData', component: TableData } ] const router = new VueRouter({ routes }) export default router