layui和vue的项目应用（转载）

大家好，又见面了，我是你们的朋友全栈君。

layui table结合vue实现行 新增 删除 修改 – 简书

<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8">
    <title>layuiTable用vue实现行编辑  修改</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>默认表格</legend>
    </fieldset>
    <div id="app">
        <button type="button" class="layui-btn" @click="addRow">新增</button> 
        <form class="layui-form" action="">
            <div class="layui-form" id="">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="150">
                  <col width="100">
                  <col width="50">
                  <col width="50">
                </colgroup>
                <thead>
                  <tr >
                    <th>名称</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>年级</th>
                    <th>操作</th>
                  </tr> 
                </thead>
                <tbody>
                  <tr v-for="(item, index) in showMealList">
                    <td><input type="text" name="userName" placeholder="请输入" autocomplete="off" class="layui-input" v-model="item.userName"></td>
                    <td>
                            
                        <div class="layui-inline">
                          <input type="radio" v-bind:name="'sex_'+index" value="男" title="男"  :checked="item.sex==1">
                          <input type="radio" v-bind:name="'sex_'+index" value="女" title="女" :checked="item.sex==2">
                        </div>
                    </td>
                    <td><input type="datetime" class="layui-input data"  v-bind:name="'data_'+index" v-bind:rowIndex="index" name="data" v-model="item.data"></td>
                    <td>
                        <select style="width: 80px;" name="grade"  v-bind:rowIndex="index"  v-model="item.grade">
                            <option></option>
                            <option v-for="(gradeObj, gradeIndex) in grades" :checked="item.grade==gradeObj">{
  
  {gradeObj}}</option>
                        </select>
                    </td>
                     <td><button type="button" class="layui-btn" @click="delRow(index)">删除</button></td>
                  </tr>
                  
                </tbody>
              </table>
            </div>
        </form> 
    </div>
    
<script type="text/javascript">
    var form ;
    var laydate;
    layui.use(['form','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
          form = layui.form;
          laydate = layui.laydate; //日期
          var laypage = layui.laypage //分页
          ,layer = layui.layer //弹层
          ,table = layui.table //表格
          ,carousel = layui.carousel //轮播
          ,upload = layui.upload //上传
          ,element = layui.element; //元素操作 等等...
          
          laydateRender();
          
          form.on('select', function(data){
             var rowValue = data.elem.getAttribute('rowIndex');
             //这里加个name 可以区分同一行多个select
             var valueName = data.elem.getAttribute('name');
             app.showMealList[rowValue][valueName] = data.value;
          });
    
    });
    function laydateRender(){
        lay('.data').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
                ,showBottom: false
                ,done: function (value) { // value 是laydate选择的日期
                     this.value = value; // vue对象的属性设置为当前的日期
                     //这里注意要获取行数  然后把该行的时间对象更新了
                     var rowValue = this.elem.attr('rowIndex');
                     app.showMealList[rowValue].data = value;
                }
            });
        });
    }
    
    var app = new Vue({
              el: '#app',
              data: {
                message:'  ',
                grades:[1,2,3,4,5,6],
                rowObj:{
                    userName:'',
                    sex:1,
                    data:'',
                    grade:''
                },
                showMealList:[]
              },
              created: function () {
                this.showMealList[0] = JSON.parse(JSON.stringify(this.rowObj))
              },
              watch:{
                 
              },
              methods:{
                  addRow:function(){
                      console.log('addRow')
                      //this.$set(this.showMealList, showMealListlength, this.rowObj);
                      var newObj = JSON.parse(JSON.stringify(this.rowObj))
                      this.showMealList.push(newObj)
                  },
                  delRow:function(rowIndex){
                        console.log(rowIndex)
                        this.showMealList.splice(rowIndex,1);
                  }
              },
              updated:function(){
                form.render();
                laydateRender();
              }
              
                
            })
</script>
</body>
</html>