vue3-drr-grid-layout 添加删除例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue3-drr-grid-layout 添加删除例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue3/vue.global.prod.js"></script>
    <script src="https://www.itxst.com/package/vue3-drr-grid/vue3-drr-grid-layout.umd.js">
    </script>
    <link href="https://www.itxst.com/package/vue3-drr-grid/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body style="padding:10px;">
    <div id="app">
        <div class="droppable-element" @click="add">添加单元格</div>
        <grid-layout v-model:layout="layout" :col-num="12" :row-height="30" style="width: 100vw">
            <template #default="{ gridItemProps }">
                <grid-item v-for="item in layout" :key="item.i" v-bind="gridItemProps" :x="item.x" :y="item.y"
                    :w="item.w" :h="item.h" :i="item.i" @resize="resize" @move="move">
                    <div class="item">
                        <label>{{ item.i }}</label><span @click="del(item.i)">删除x</span>
                    </div>
                </grid-item>
            </template>
        </grid-layout>
    </div>
    <script>
        Vue.createApp({
            components: {
                'grid-layout': window.Vue3DRRGridLayout.GridLayout,//当前页面注册组件
                'grid-item': window.Vue3DRRGridLayout.GridItem
            },
            data() {
                return {
                    message: 'www.itxst.com',
                    layout: [
                        { x: 0, y: 0, w: 2, h: 2, i: 0 },
                        { x: 2, y: 0, w: 2, h: 2, i: 1 },
                        { x: 4, y: 0, w: 2, h: 2, i: 2 },
                        { x: 0, y: 1, w: 6, h: 2, i: 3 },
                    ]
                }
            },
            methods: {

//删除单元格
                del(i) {
                    this.layout = this.layout.filter((a) => a.i != i);
                },
                //添加一个单元格
                add() {
                    var y = 0;
                    var that = this;
                    for (var i = 0; i < that.layout.length; i++) {
                        var a = that.layout[i];
                        if (a.y > y) y = a.y + 1;
                    };
                    that.layout.push({
                        x: 0,
                        y: y,
                        w: 2,
                        h: 2,
                        i: that.layout.length,
                    });
                }

},
        }).mount('#app')
    </script>
    <style>
        .droppable-element {
            width: 120px;
            text-align: center;
            background: #fdd;
            border: 1px solid black;
            margin: 10px 0;
            padding: 10px;
        }

.item {
            display: flex;
            justify-content: space-between;
        }

.item>span {
            margin-left: 10px;
            padding: 1px;
            border: solid 1px #ddd;
            cursor: pointer;
            background-color: rgb(171, 171, 171);
            color: #000;
            font-size: 11px;
        }
    </style>
</body>
</html>