如图所示，增加了侧拉栏，目的是可以选择多条数据展示数据
组件： celadon.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <div class="LayoutMain"> <div></div> <div class="aside-wrap-slot"> </div> <div class="layout-main-btn"> <i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-right"></i> </div> </div>export default { name: "LayoutMain", components: {}, props: { sidebarIsCollapse: { type: Boolean, default: false, }, menuName: { type: String, default: "", }, }, data() { return {}; }, methods: { toggleCollapse() { this.$emit("toggleCollapse"); }, },};.LayoutMain { background: transparent; height: 100%; width: 100%; display: flex; ::v-deep .el-main { padding: 16px !important; } .aside-wrap { height: 100%; background: rgba(67, 133, 219, 0.301); transition: width 0.4s; .aside-wrap-header { display: flex; // height: 48px; align-items: center; padding: 0 16px; font-size: 14px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; cursor: pointer; &::v-deep .el-menu::-webkit-scrollbar { width: 0 !important; -ms-overflow-style: scroll; overflow: scroll; } } } .layout-main-btn { position: absolute; top: 40px; z-index: 999; height: 56px; line-height: 54px; text-align: center; width: 14px; border-radius: 10px; border: 0.5px solid #ccc; background: rgb(27, 118, 238); cursor: pointer; i { color: #e4dada; font-size: 14px; } } .left { left: 180px; transition: left 0.4s; } .hide { left: -5px; transition: left 0.4s; }} |
在页面使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <div style="z-index:999;position: absolute;width: 180px;height: 300px"> <div class="select-items"> <div class="selset-item"> <label>{{ item.name }}</label> </div> 选择</div> </div> items: [ { name: "1号设备", value: "12" }, { name: "2号设备", value: "13" }, { name: "3号设备", value: "4" }, { name: "3号设备", value: "2" }, { name: "3号设备", value: "3" }, { name: "3号设备", value: "1" }, { name: "3号设备", value: "11" }, { name: "3号设备", value: "14" }, { name: "3号设备", value: "15" }, { name: "3号设备", value: "16" }, { name: "3号设备", value: "17" }, { name: "3号设备", value: "33" }, { name: "3号设备", value: "22" }, { name: "3号设备", value: "55" }, { name: "3号设备", value: "66" }, { name: "3号设备", value: "31" }, { name: "3号设备", value: "56" }, { name: "3号设备", value: "45" }, ], selectCheckBox(value){ console.log(value) }, toggleCollapse() { this.sidebarIsCollapse = !this.sidebarIsCollapse; }, |
到此这篇关于vue elementui简易侧拉栏的使用的文章就介绍到这了,更多相关vue elementui侧拉栏内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
