Vue创建table表格实现添加删除,经测无误!!!!

<table class="layui-table" style="text-align:center">
            <thead>
                 <tr>
                     <th style="text-align:center">单位名称</th>
                     <th style="text-align:center">单位性质</th>
                     <th style="text-align:center">备案情况</th>
                     <th style="text-align:center">操作</th>
                 </tr>
            </thead>
             <tbody>
                  <tr v-for="(u,index) in unit">
                      <td>{{u.unitName}}</td>
                      <td>{{u.type == 1 ? '主办单位':u.type == 2 ? '协办单位':'承办单位'}}</td>
                      <td>{{u.record == 0 ? '未备案':'已备案'}}</td>
                      <td><button type="button" class="layui-btn layui-btn-sm layui-btn-danger"  @click="remove(index)">移除</button></td>
                  </tr>
                  <tr>
                      <td><input class="layui-input userName" id="unitName" v-model="unitName"></td>
                      <td>
                            <select id="type">
                                <option value="">choose</option>
                                <option value="1">主办单位</option>
                                <option value="2">协办单位</option>
                                <option value="3">承办单位</option>
                            </select>
                      </td>
                      <td>
                            <select id="record">
                                <option value="">choose</option>
                                <option value="0">未备案</option>
                                <option value="1">已备案</option>
                            </select>
                      </td>
                      <td><button type="button" class="layui-btn layui-btn-sm" @click="insert()">添加</button></td>
                  </tr>
            </tbody>
        </table> 

 

 

<script type="text/javascript">
        //动态生成表格
        $(function() {
            
        })
        var holdvm = new Vue({
            el : '#holdUnit',
            data : {
                unitName:'',
                type:'',
                record:'',
                unit:[],
                
            },
            methods : {
                insert:function(){
                    
                    var type = document.getElementById("type").value;
                    var record = document.getElementById("record").value;
                    if(!holdvm.unitName){
                        layer.msg("单位名称不能为空");
                        return;
                    }
                    if(!type){
                        layer.msg("请选择举办单位性质");
                        return;
                    }
                    if(!record){
                        layer.msg("请选择备案情况");
                        return;
                    }
                    var user = {};
                    user.unitName = holdvm.unitName;
                    user.type = document.getElementById("type").value;
                    user.record = document.getElementById("record").value;
                    holdvm.unit.push(user);
                    document.getElementById("type").value='';
                    document.getElementById("record").value='';
                    form.render();
                },
                remove:function(index){
                    holdvm.unit.splice(index,1)
                },
                getDate : function(){
                    
                }
            }
        })
    </script>

注 : 除样式外 , js可精简 , 但是初始化 unitname 不可删除 , 否则会导致数据显示不出来;