使用el-col和el-row布局，有版心，一页有两栏布局 三栏布局 四栏布局 使用vue动态渲染元素
使用Vue结合Element UI的el-row和el-col组件来实现版心布局，并动态渲染不同栏数的布局，可以通过以下步骤实现：
-
定义版心容器：使用
el-container来定义整个页面的容器，其中el-header、el-main、el-footer分别定义头部、主要内容和底部。 -
动态渲染列：使用
v-for指令在el-row中动态渲染el-col组件。 -
控制列数：通过Vue的数据属性来控制渲染的列数。
下面是一个示例代码，展示如何实现上述功能：
<template><el-container><el-header>头部</el-header><el-main><div class="layout-selector"><button @click="setLayout(2)">两栏布局</button><button @click="setLayout(3)">三栏布局</button><button @click="setLayout(4)">四栏布局</button></div><el-row :gutter="20"><el-col v-for="(item, index) in cols" :key="index" :span="24 / currentLayout"><div>栏目内容 {{ index + 1 }}</div></el-col></el-row></el-main><el-footer>底部</el-footer></el-container>
</template><script>
export default {data() {return {currentLayout: 2, // 默认两栏布局cols: [1, 2, 3, 4], // 栏目数据};},methods: {setLayout(layout) {this.currentLayout = layout;}}
};
</script><style>
.layout-selector {margin-bottom: 20px;
}
</style>
在这个示例中：
- 使用
el-container包裹整个页面，定义了头部、主要内容和底部。 el-row中的gutter属性定义了列之间的间距。- 使用
v-for指令在el-row中动态渲染el-col组件，每个el-col的span属性通过24 / currentLayout计算得出，确保列宽平均分配。 setLayout方法用于更改currentLayout的值，从而改变布局的列数。- 通过按钮点击事件来动态切换布局的列数。
这样，你就可以根据用户的操作动态地改变页面的布局列数。