赞
踩
效果图
组件Lattice代码
<template> <div> <el-row v-for="i in rowNum" :key="'row-' + i"> <el-col v-for="(item, index) in data" :key="'col-' + index" v-if="index < colNum * i && index >= colNum * (i - 1)" :span="24 / colNum" > <slot :data="item"></slot> </el-col> </el-row> </div> </template> <script> export default { name: 'Lattice', props: { rowNum: { type: Number, default: 1 }, colNum: { type: Number, default: 1 }, data: Array } } </script>
父模块使用组件demo
<template> <div> <Lattice :row-num="rowNum" :col-num="colNum" :data="dataList"> <template slot-scope="obj"> <div style="height: 200px" :style="{backgroundColor: obj.data.color}">{{obj.data.name}}</div> </template> </Lattice> <el-row style="padding: 10px"> <el-col :span="1"> <span>行</span> </el-col> <el-col :span="3"> <el-select v-model="rowNum" :clearable="false"> <el-option v-for="row in rowNumList" :key="row" :value="row"></el-option> </el-select> </el-col> <el-col :span="1"> <span>列</span> </el-col> <el-col :span="3"> <el-select v-model="colNum" :clearable="false"> <el-option v-for="col in colNumList" :key="col" :value="col"></el-option> </el-select> </el-col> </el-row> </div> </template> <script> import Lattice from './Lattice' export default { name: 'Test', components: {Lattice}, data () { return { rowNum: 2, colNum: 3, rowNumList: [1, 2, 3], colNumList: [1, 2, 3], dataList: [ { name: '测试1', color: 'red' }, { name: '测试2', color: 'green' }, { name: '测试3', color: 'blue' }, { name: '测试4', color: 'orange' }, { name: '测试5', color: 'pink' }, { name: '测试6', color: 'yellow' } ] } } } </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。