使用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的值，從而改變布局的列數。- 通過按鈕點擊事件來動態切換布局的列數。
這樣，你就可以根據用戶的操作動態地改變頁面的布局列數。
)
