Vue+elementUI实现增删改查（前端静态页面）
以下是一个简单的使用Vue和Element UI实现的增删改查静态页面示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue + Element UI CRUD Example</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-table :data="items" 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="150">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="编辑" :visible.sync="dialogVisible">
<el-form :model="form">
<el-form-item label="日期">
<el-input v-model="form.date" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
// ... 更多数据
],
dialogVisible: false,
form: {},
currentIndex: -1
},
methods: {
handleEdit(index, row) {
this.form = Object.assign({}, row);
this.currentIndex = index;
t
评论已关闭