一个简单的vue 增删改查的例子。[在线地址][1]
html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div id="app">
   <div class="container">
     <div class="input-group">
       <span class="input-group-addon">查询</span>
       <input class="form-control" v-model="searchQuery" type="text" name="" id="" />
     </div>

  </div>
  <div class="container">
    <grid-s :list="list" :colums="colums" :search-Query="searchQuery"></grid-s>
  </div>
</div>
<template id="grid-tpl">
  <dialog-s :index="index" :mode="mode" :fields="colums" :title="title" :item="item" @create-item="createItem" @modify-item="modifyItem"></dialog-s>
  <table class="table">
    <thead>
      <tr>
        <th v-for="col in colums">
          {{col.title}}
        </th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(index,item) in list|filterBy searchQuery">
        <td v-for="col in colums">
          {{item[col.title]}}
        </td>
        <td>
          <button @click="openModifyItemDialog(item,index)"  class="btn btn-success btn-xs">修改</button>
          <button @click="delItem(index)"  class="btn btn-danger btn-xs">删除</button></td>
      </tr>
    </tbody>
  </table>
  <div class="container">
        <button class="btn btn-success" @click="openNewItemDialog('新增')">新增</button>
    </div>
</template>
<template id="dialog-tpl">
  <div class="dialogs">
    <div class="dialog" :class="{'dialog-active':show}">
      <div class="dialog-content">
        <header class="dialog-header">
          <h1 class="dialog-title">{{title}}</h1>
        </header>
        <div class="form-horizontal">
        <div v-for="field in fields" class="form-group">
          <label>{{field.title}}</label>
          <input class="form-control" v-model="item[field.title]" type="text" name="" id="" />
        </div>
          </div>
        <footer class="dialog-footer">
          <div class="footer-btn">
            <button @click="save" class="btn btn-success">保存</button>
            <button @click="close" class="btn btn-danger">取消</button>
          </div>
        </footer>
      </div>
    </div>
    <div class="dialog-mask"></div>
  </div>
</template>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.dialog {
	width: 350px;
	position: fixed;
	left: 50%;
	top: 2em;
	transform: translateX(-50%);
	z-index: 2000;
	visibility: hidden;
	backface-visibility: hidden;
	perspective: 1300px;
}

.dialog-active {
	visibility: visible;
}

.dialog-active .dialog-content {
	opacity: 1;
	transform: rotateY(0);
}

.dialog-active ~ .dialog-mask {
	opacity: 1;
	visibility: visible;
}

.dialog-content {
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	transition: .5s ease-in-out;
	opacity: 0;
	transform-style: preserve-3d;
	transform: rotateY(-70deg);
}

.dialog-header {
	background: #0090d3;
	color: #fff;
}

.dialog-title {
	margin: 0;
	font-size: 2em;
	text-align: center;
	font-weight: 200;
	line-height: 2em;
}

.dialog-body {
	padding: 2em;
}

.dialog-footer {
	margin: 0 2em;
	padding: 1em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-mask {
	content: "";
	position: fixed;
	visibility: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: all .6s;
}
.form-horizontal .form-group {
    margin-right: 15px;
    margin-left: 15px;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
Vue.component("grid-s",{
  template:"#grid-tpl",
  props:["list","colums","searchQuery"],
  data:function(){
    return {
      mode:0,
      item:{},
      title:"",
      index:0
    }
  },
  methods:{
    openNewItemDialog:function(title){
      this.title=title;
      this.mode=1;
      this.item={};
      this.$broadcast('showDialog', true);
    },
    createItem:function(){
      this.list.push(this.item);
      this.$broadcast('showDialog', false);
      wilddog.set(item);
      this.item = {};
    },
    delItem:function(index){
      this.list.splice(index,1);
    },
    modifyItem:function(){
      for (var j in this.item) {
           this.list[this.index][j] = this.item[j]
      }
      this.$broadcast('showDialog', false);
      this.item = {};
    },
    openModifyItemDialog:function(item,index){
      this.title="Edit "+item.title;
      this.mode=2;
      this.item=_.cloneDeep(item);
      this.index=index;
      this.$broadcast('showDialog', true);
    }

  },
  components:{
    "dialog-s":{
      template:"#dialog-tpl",
      props:["mode","title","fields","item","index"],
      data:function(){
        return {
          show:false
        }
      },
      methods:{
        close:function(){
          this.show=false;
        },
        save:function(){
          if(this.mode==1){
            this.$dispatch('create-item');
          }
          else{
            this.$dispatch('modify-item');
          }
        }
      },
      events:{
        'showDialog': function(show) {
                    this.show = show;
                }
      }
    }
  }
});
var demo=new Vue({
  el:"#app",
  data:{
    searchQuery:'',
    colums:[{title:"title"},{title:"sku"},{title:"price"}],
    list:[{
      title:"sony",
      sku:"23232323A",
      price:5000
    },{
      title:"Apple",
      sku:"45454545A",
      price:6000
    }]
}
});

demo