使用vue实现表格的增删改查
时间:2020-05-20
本文章向大家介绍使用vue实现表格的增删改查,主要包括使用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
效果图如下:
查询:
添加:
修改:
删除:
提示:
如何搭建vue脚手架?如有需要参考请转向我下面这篇博客
https://www.cnblogs.com/ckfeng/p/12846957.html
项目已托管码云
地址:https://gitee.com/ckfeng/table-crud.git
Element-UI 官网地址:https://element.eleme.cn/#/zh-CN/component/installation
原文地址:https://www.cnblogs.com/ckfeng/p/12923006.html
- Selenium2+python自动化74-jquery定位
- 用php实现简单的自制计算器
- Selenium2+python自动化75-Chrome配置加载
- Selenium2+python自动化75-非input文件上传(SendKeys)
- python接口自动化11-post传data参数案例
- POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
- python接口自动化12-案例分析(csrfToken)
- Python基础学习笔记
- POJ 3278 Catch That Cow(BFS,板子题)
- 【请您听我说】PHP语法特点的一些看法
- 喵哈哈村的魔法考试 Round #1 (Div.2) 题解&源码(A.水+暴力,B.dp+栈)
- 查找第k小的元素(O(n)递归解法)
- C/C++对bool operator < (const p &a)const的认识,运算符重载详解(杂谈)
- C/C++中substr函数的应用(简单讲解)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法