基于vue的表格增删改查效果-html代码-BFW代码库

基于vue的表格增删改查效果

代码语言：html

代码描述：基于vue的表格增删改查效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>

<style type="text/css">
        #table table {
                width: 100%;
                font-size: 14px;
                border: 1px solid #eee
        }
        
        #table {
                padding: 0 10px;
        }
        
        table thead th {
                background: #f5f5f5;
                padding: 10px;
                text-align: left;
        }
        
        table tbody td {
                padding: 10px;
                text-align: left;
                border-bottom: 1px solid #eee;
                border-right: 1px solid #eee;
        }
        
        table tbody td span {
                margin: 0 10px;
                cursor: pointer;
        }
        
        .delete {
                color: red;
        }
        
        .edit {
                color: #008cd5;
        }
        
        .add {
                border: 1px solid #eee;
                margin: 10px 0;
                padding: 15px;
        }
        
        input {
                border: 1px solid #ccc;
                padding: 5px;
                border-radius: 3px;
                margin-right: 15px;
        }
        
        button {
                background: #008cd5;
                border: 0;
                padding: 4px 15px;
                border-radius: 3px;
                color: #fff;
        }
        
        #mask {
                background: rgba(0, 0, 0, .5);
                width: 100%;
                height: 100%;
                position: fixed;
                z-index: 4;
                top: 0;
                left: 0;
        }
        
        .mask {
                width: 300px;
                height: 250px;
                background: rgba(255, 255, 255, 1);
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                z-index: 47;
                border-radius: 5px;
        }
        
        .title {
                padding: 10px;
                border-bottom: 1px solid #eee;
        }
        
        .title span {
                float: right;
                cursor: pointer;
        }
        
        .content {
                padding: 10px;
        }
        
        .content input {
                width: 270px;
                margin-bottom: 15px;
        }
</style>

</head>
<body>
<div id="table">
        <div class="add">
                <input type="text" v-model="addDetail.title" name="title" value="" placeholder="标题" />
                <input type="text" v-model="addDetail.user" name="user" value="" placeholder="发布人" />
                <input type="date" v-model="addDetail.dates" name="date" value="" placeholder="发布时间" />
                <button @click="adddeta.........完整代码请登录后点击上方下载按钮下载查看