vue递归组件

1.效果图

image.png image.png

2.布局

     <div class="box-body">

              <div class="form-group">
                  <label for="homePageName">说明</label>
                  <input type="itemNote"  id="homePageName"  style="width:1000px;" placeholder="输入说明">
              </div>
              <div>
                  <label for="templatesId">模板ID</label>
                  <input type="text" id="templatesId" style="width:1000px" v-bind:value="id">
              </div>
              <!--TODO-->
              <div id="form">
                  <ul>
                      <block-item v-model="item" item-key="数据" />
                  </ul>
                  <button class="btn btn-primary" @click="showValue">logJson</button>
                  <button class="btn btn-primary" v-on:click="saveValue">保存</button>
              </div>

     </div>

模板：

  <!-- 模板 -->
<script type="text/x-template" id="block-item-template">
<li>
    {{itemKey}}
    <button v-if="itemType === 'array'" @click="add">add</button>
    <button v-if="showRemove" @click="remove">remove</button>

    <input v-if="itemType === 'string'" :value="value" @input="$emit('input', $event.target.value)" />
    <ul v-else>
        <block-item v-for="(_, key) in value" :key="key" v-model="value[key]" :itemKey="key" :showRemove="itemType === 'array' && value.length > 1"
                    @remove="onRemove" />
    </ul>
</li>
</script>

实例以及函数方法:

  /*todo*/
    Vue.component('block-item', {
        template: '#block-item-template',
        props: ['value', 'itemKey', 'showRemove'],

        data: function () {
            return {}
        },

        computed: {
            itemType: function () {
                return this.typeOf(this.value)
            }
        },

        methods: {
            typeOf(item) {
                if (Array.isArray(item)) {
                    return 'array'
                } else if (item && typeof item === 'object') {
                    return 'object'
                } else {
                    return 'string'
                }
            },

            add() {
                if (this.itemType !== 'array') {
                    return
                }
                this.value.push(this.value.length === 0 ? '' : this.clone(this.value[0]))
            },

            clone(item) {
                const type = this.typeOf(item)
                if (type === 'object') {
                    const obj = {}
                    for (let key in item) {
                        obj[key] = this.clone(item[key])
                    }
                    return obj
                } else if (type === 'array') {
                    return item.length === 0 ? [] : [this.clone(item[0])]
                } else {
                    return ''
                }
            },

            remove() {
                this.$emit('remove', this.itemKey)
            },

            onRemove(key) {
                if (this.itemType === 'array') {
                    this.value.splice(key, 1)
                } else if (this.itemType === 'object') {
                    this.$delete(this.value, key)
                }
            }
        }
    })

    new Vue({
        el: '#form',
        data: {
            item: {}
        },
        methods: {
            showValue() {
                console.log(JSON.parse(JSON.stringify(this.item)))
            },
            saveValue(){

                var obj = new Object();
                obj.data=this.item;
                obj.name=$('#homePageName').val();
                obj.templatesId = $('#templatesId').val();
                console.log(obj);
                post("save",obj)
            }

        },

        created: function() {
            $.ajax({
                type: "GET",
                url: "getJson",
                contentType: "application/json",
                dataType: "json",
                success:  (message) => {
                    this.item = message.data
                },
                error: function (message) {

                }
            });
        }
    })
    function test (){
        var data = {};
        data.storeItemId = "123";
        data.storeId = "123";
        var url = "save";
        post(url,data);
    }

    function post(url,json){
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json",
            data: JSON.stringify(json),
            dataType: "json",
            success: function (message) {
                console.log(message);
                console.log(message.id);
                alert("保存成功!");
                window.location.href = "../edit/"+message.id+"/";
            },
            error: function (message) {
                alert("org.sabuy.entity.homepages->not exit!");
                console.log(message);
            }
        });
    }