在ul，li遍历形成的表格中，通过输入行值和列值，设置表格的布局

由于项目要求，需要用户自定义行值和列值，形成一个表格布局，然后进行拖拽操作。

此处只介绍如何进行用户自定义行值和列值，形成表格布局。

首先是 ul 和 li 遍历

<div class="showArea" id="111" :key="showAreaKey">
     <ul v-for="(ul,ulIndex) in ulList" :key="ulIndex" >
         <li v-for="(item,liIndex) in liList" 
             :key="liIndex" 
             :id="initId(ulIndex+1,liIndex+1)"></li>
     </ul>
</div>

设置了一个初始的ulList 和liList：

css设置：

.showArea ul {
        width: 100%;
        height: calc((100% - 10px) / 6);
        display: flex;
    }

    .showArea ul li {
        flex: 1;
        width: calc(100% / 9);
        height: 100%;
        border: 1px dashed var(--config-border);
        list-style: none;
        align-items: center;
        justify-content: center;
        display: flex;
    }

 形成的表格布局如下图

然后设置一个修改布局按钮：

 <el-button type="default" 
            class="simple-btn" 
            size="mini" 
            @click="changeLayout">修改布局</el-button>

 使用 el-dialog 设置一个弹窗

<!--      修改布局按钮弹窗-->
        <el-dialog
                title="修改布局"
                aria-modal="false"
                :visible.sync="layoutVisible"
                width="25%">
            <el-form :model="layoutInfo" label-width="100px" >
                <el-form-item label="设置行数">
                    <div class="layout-change">
                        <a class="numBtn el-icon-minus" @click="handler('minus',-1,'row')"></a>
                        <el-input type="text"
                               :value="layoutInfo.row"
                               @change="handler('change',$event.target.value * 1,'row')"/>
                        <a class="numBtn el-icon-plus" @click="handler('add',1,'row')"></a>
                    </div>
                </el-form-item>
                <el-form-item label="设置列数">
                    <div class="layout-change">
                        <a class="numBtn el-icon-minus" @click="handler('minus',-1,'column')"></a>
                        <el-input type="text"
                               :value="layoutInfo.column"
                               @change="handler('change',$event.target.value * 1,'column')"/>
                        <a class="numBtn el-icon-plus" @click="handler('add',1,'column')"></a>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="layoutVisible = false" style="color:#000;">取 消</el-button>
                <el-button type="primary" @click.stop="sureChangeLayout">确认修改</el-button>
            </span>
        </el-dialog>

点击修改布局按钮，出现弹窗，用户可以进行行列值的设置：

 行列值变化，会存储到布局对象参数中，设置完成，点击确认修改按钮，会通过布局对象参数中存储的值，重新设置 ulList 和 liList，并设置对应的 ul 宽高。

此处使用了throttle，进行节流操作，防止操作频繁

 import throttle from 'lodash/throttle'

//修改当前模型配置布局页面大小
            changeLayout() {
                //修改布局弹窗展示
                this.layoutVisible = true
            },
            handler: throttle(async function (action, value, type) {
                //action---操作类型，+(add),-(minus),input(change)
                //value---变化量
                //type----变化的是行值还是列值
                switch (action) {
                    case 'minus':
                        //    判断产品个数大于1，才可以传递给服务器 -1
                        //    如果出现产品的个数小于等于1 ，传递给服务器个数0
                        value = this.layoutInfo[type] > 1 ? -1 : 0;
                        break;
                    case 'add':
                        value = 1;
                        break;
                    case 'change':
                        //若用户输入值含有非法字符，
                        if (isNaN(value) || value < 1) {
                            value = 0;
                        } else {
                            value = Math.ceil(value) - this.layoutInfo[type]
                        }
                        break;
                    default:
                        break;
                }
                this.layoutInfo[type] = this.layoutInfo[type] + value
            }, 500),

此处涉及一个最大行值 maxRow 和最大列值 maxColumn，代表页面可直接显示的最大的行值和列值，若设置的行值或列值大于最大行值和列值，会出现滚动条。

行值滚动条，由于在父盒子中使用ul遍历，可以通过设置ul的height来实现

列值滚动条，由于在 ul 中，使用 display:flex 布局使所有 li 位于一行中，无论通过遍历产生了多少个 li，都会自动设置 width 值填满 ul；因此如果要实现列值滚动条，不能设置 li 的 width 值，需要设置 ul 的 width 值。

//确认修改布局
            sureChangeLayout() {
                this.layoutVisible = false
                this.ulList = [];
                this.liList = [];
                const {row, column} = this.layoutInfo
                for (let i = 1; i <= row; i++) {
                    this.ulList.push({nodeId: i})
                }
                for (let j = 1; j <= column; j++) {
                    this.liList.push({nodeId: j})
                }
                //    修改li格子的大小
                //    若row > 10 ,column > 16,则使布局页可以滑动
                const {maxRow, maxColumn} = this
                const rowHeight = row > maxRow ? maxRow : row
                //若column值大于maxColumn,需要扩大ul的宽度，使出现滚动条
                const ulWidth = column > maxColumn ? `calc((100% / ${maxColumn})*${column})` : '100%'
                console.log(rowHeight, ulWidth)
                this.$nextTick(() => {
                    document.querySelectorAll('.showArea ul').forEach(item => {
                        item.style.height = `calc((100% - 10px) / ${rowHeight})`
                        item.style.width = ulWidth
                    })
                })
            },