vue elementui簡(jiǎn)易側(cè)拉欄的使用小結(jié)
更新時(shí)間：2024年06月27日 10:41:37 作者：極端~
這篇文章主要介紹了vue elementui簡(jiǎn)易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
如圖所示，增加了側(cè)拉欄，目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù)
組件： celadon.vue
<template>
<div class="LayoutMain">
<el-aside :width="sidebarIsCollapse ? '180px' : '0px'" class="aside-wrap">
<template>
<div
:class="[
'aside-wrap-header',
{ 'aside-wrap-header--hide': sidebarIsCollapse },
]"
@click="toggleCollapse"
></div>
<div class="aside-wrap-slot">
<slot class="btnSlot" name="asideWrapSlot" />
</div>
</template>
</el-aside>
<div
class="layout-main-btn"
:class="['left', { hide: !sidebarIsCollapse }]"
@click="toggleCollapse"
>
<template v-if="sidebarIsCollapse">
<i class="el-icon-arrow-left" />
</template>
<template v-else>
<i class="el-icon-arrow-right" />
</template>
</div>
</div>
</template>
<script>
export default {
name: "LayoutMain",
components: {},
props: {
sidebarIsCollapse: {
type: Boolean,
default: false,
},
menuName: {
type: String,
default: "",
},
},
data() {
return {};
},
methods: {
toggleCollapse() {
this.$emit("toggleCollapse");
},
},
};
</script>
<style lang="scss" scoped>
.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;
}
}
</style>在頁(yè)面使用
<!--數(shù)據(jù)分析側(cè)拉欄-->
<div style="z-index:999; position: absolute;width: 180px;height: 300px;"
>
<celadon
style="
margin-top: 40px;
height: 100%;
width: 100%;
overflow: scroll;
"
:sidebar-is-collapse="sidebarIsCollapse"
@toggleCollapse="toggleCollapse"
>
<div class="select-items" slot="asideWrapSlot">
<div
class="selset-item"
v-for="(item, index) in items"
:key="index"
>
<input
type="checkbox"
:id="'checkbox-' + index"
v-model="selectedItems"
:value="item"
@click="selectCheckBox"
/>
<label :for="'checkbox-' + index">{{ item.name }}</label>
</div>
<el-button style="margin: 20px 30px" size="small" type="primary"
>選擇</el-button
>
</div>
</celadon>
</div>
<!--data-->
items: [
{ name: "1號(hào)設(shè)備", value: "12" },
{ name: "2號(hào)設(shè)備", value: "13" },
{ name: "3號(hào)設(shè)備", value: "4" },
{ name: "3號(hào)設(shè)備", value: "2" },
{ name: "3號(hào)設(shè)備", value: "3" },
{ name: "3號(hào)設(shè)備", value: "1" },
{ name: "3號(hào)設(shè)備", value: "11" },
{ name: "3號(hào)設(shè)備", value: "14" },
{ name: "3號(hào)設(shè)備", value: "15" },
{ name: "3號(hào)設(shè)備", value: "16" },
{ name: "3號(hào)設(shè)備", value: "17" },
{ name: "3號(hào)設(shè)備", value: "33" },
{ name: "3號(hào)設(shè)備", value: "22" },
{ name: "3號(hào)設(shè)備", value: "55" },
{ name: "3號(hào)設(shè)備", value: "66" },
{ name: "3號(hào)設(shè)備", value: "31" },
{ name: "3號(hào)設(shè)備", value: "56" },
{ name: "3號(hào)設(shè)備", value: "45" },
],
<!--methods-->
selectCheckBox(value){
console.log(value)
},
toggleCollapse() {
this.sidebarIsCollapse = !this.sidebarIsCollapse;
},到此這篇關(guān)于vue elementui簡(jiǎn)易側(cè)拉欄的使用的文章就介紹到這了,更多相關(guān)vue elementui側(cè)拉欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過(guò)本文給大家分享Vue.js組件通信的幾種姿勢(shì)，感興趣的朋友一起看看吧
2017-10-10 
這篇文章主要介紹了Vue3之修改端口號(hào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10 
vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案分享
這篇文章主要給大家介紹了關(guān)于vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02 
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁(yè)面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下
2021-06-06 
vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10 
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01 
Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧
2023-10-10 
vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2024-02-02 
vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07