1. Vue+ElementUI实现增删改查

  2. 效果演示地址
    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;
	}

Logo

前往低代码交流专区

更多推荐