Vue+ElementUI实现增删改查（代码）
Vue+ElementUI实现增删改查效果演示地址3.代码页面代码<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpk...
·
-
Vue+ElementUI实现增删改查
- 效果演示地址
3.代码
- 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<style type="text/css">
</style>
<body>
<div id="app">
<h1>主界面</h1>
<!-- <img src="./img/koo.png" alt="" srcset=""> -->
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>合格作品</template>
<el-submenu index="2-4">
<template slot="title">合格作品展示</template>
<el-menu-item index="2-4-1">合格作品展示</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="1">
<template slot="title"><i class="el-icon-s-custom"></i><a href="layout/WorkerUpload.html">工作上传</a></template>
<el-submenu index="1-4">
<template slot="title">工作人员上传</template>
<el-menu-item index="1-4-1">工作人员上传</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-upload"></i><a href="./layout/StudentUpload.html">学生上传</a></template>
<el-submenu index="2-4">
<template slot="title">学生上传</template>
<el-menu-item index="2-4-1">学生上传</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<!-- 合格作品展示 -->
<el-container>
<div class="st">
<span>审核通过的作品在这里进行展示 </span>
<div class="container" id="app">
<div>
<input type="text" placeholder="Search" @input="search" list="cars" class="search">
<datalist id="cars">
<option v-for="item in searchlist" :value="item"></option>
</datalist>
<el-button type="primary" size="mini" class="add" @click="add">新增</el-button>
</div>
<div>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>网站链接</th>
<th>网站简述</th>
<th>操作</th>
</tr>
<tr v-cloak v-for="(item, index) of slist">
<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{item.sex}}</td>
<td>{{item.href}}</td>
<td>{{item.detail}}</td>
<td>
<el-button type="success" size="mini" @click="showOverlay(index)">编辑</el-button>
<el-button type="danger" size="mini" @click="del(index)">删除</el-button>
</tr>
</table>
</div>
<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
</div>
</el-container>
<!-- 合格作品展示结束 -->
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// 弹层组件
Vue.component('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="border">
<h3 class="title">新增 | 修改</h3>
<div class="content">
<table>
<tr>
<td>用户名</td>
<td><input type="text" v-model="modifylist.username"></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
<label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
</td>
</tr>
<tr>
<td>网站链接</td>
<td><input type="text" v-model="modifylist.href"></td>
</tr>
<tr>
<td>网站简述</td>
<td><input type="text" v-model="modifylist.detail"></td>
</tr>
</table>
<p>
<el-button type="success" size="mini" @click="modify">保存</el-button>
<el-button type="danger" size="mini" @click="changeActive">取消</el-button>
</p>
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false, //是否显示弹窗
selected: -1, //选择了 哪条记录
selectedlist: {}, //选中的记录
slist: [],
searchlist: [],
list: [
{
username: '学生1',
href: '123@qq.com',
sex: '男',
},
{
username: '学生2',
href: 'bbbbbbb@163.com',
sex: '女',
},
{
username: '学生3',
href: 'abababab@qq.com',
sex: '女',
},
{
username: '学生4',
href: '123@qq.com',
sex: '男',
},
{
username: '学生5',
href: 'bbbbbbb@163.com',
sex: '女',
},
{
username: '学生5',
href: 'bbbbbbb@163.com',
sex: '女',
},
{
username: '学生5',
href: 'bbbbbbb@163.com',
sex: '女',
},
{
username: '学生5',
href: 'bbbbbbb@163.com',
sex: '女',
},
{
username: '学生6',
href: 'abababab@qq.com',
sex: '女',
}
]
},
created() {
this.setSlist(this.list);
},
methods: {
// 修改数据
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 点击保存按钮
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
// 新增数据
add: function() {
this.selectedlist = {
username: '',
email: '',
sex: '男',
};
this.selected = -1;
this.isActive = true;
},
add: function() {
this.selected = -1;
this.isActive = true;
this.$axios.get('/userinfo/add')
.then((res) =>{
this.selectedlist = {
username: '',
email: '',
sex: '男',
};
})
.catch((res) => {
console.log('fail');
})
},
// delete list in index location
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.isActive = !this.isActive;
},
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
// 搜索
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 过滤需要的数据
this.list.forEach(function(item) {
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (item.href.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.href) == -1) {
self.searchlist.push(item.href);
}
ss.push(item);
}
});
this.setSlist(ss); // 将过滤后的数据给了slist
} else {
// 没有搜索内容，则展示全部数据
this.setSlist(this.list);
}
}
},
watch: {}
});
</script>
<!-- 引入axios对数据进行交互 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
- CSS 代码
* {
text-decoration: none;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
/* 表格 */
[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
width: 100%;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
padding: 3px 3px 3px 8px;
text-align: center;
}
table th:first-child {
width: 40px;
}
table th:nth-child(2) {
width: 50px;
}
table th:nth-child(3) {
width: 40px;
}
table th:nth-child(6) {
width: 128px;
}
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献5条内容
所有评论(0)