vue+element ui項目總結點（五）Carousel 走馬燈組件、Collapse 折疊面板、Tree 樹形控件

<template>
  <div class="ele_test_box">
    <!-- 常用效果 Popover 彈出框組件 具體屬性查看官方文檔-->
    <el-popover placement="bottom" title="標題" width="400" trigger="click" content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。">
      <span>11111111111111111</span> <!-- 利用分發取代content屬性 可以嵌套表單表格按鈕等組件-->
      <el-button slot="reference">click 激活</el-button>
    </el-popover>
    <!-- Carousel 走馬燈組件 -->
    <el-carousel :interval="3000" type="card" height="200px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <!-- Collapse 折疊面板 -->
    <el-collapse v-model="activeIndex" @change="handleChange">
      <el-collapse-item title="第一塊面板（操作互不干擾）" name="1">
        <div>第一塊的內容是在這里</div>
        <div>通過accordion屬性來設置是否以手風琴模式顯示。</div>
      </el-collapse-item>
      <el-collapse-item title="第二塊面板（操作互不干擾）" name="2">
        <div>第二塊的內容是在這里</div>
      </el-collapse-item>
      <el-collapse-item title="第三塊面板（操作互不干擾）" name="3">
        <div>第三塊的內容是在這里</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <i class="header-icon el-icon-caret-left"></i>第四塊的內容是在這里<i class="header-icon el-icon-caret-right"></i>
        </template>
        <div>除了可以通過title屬性以外,還可以通過具名slot來實現自定義面板的標題內容，以實現增加圖標等效果</div>
      </el-collapse-item>
    </el-collapse>
    <div>分別通過<span style="color: red">(default-expanded-keys)和(default-checked-keys)</span>設置默認展開和默認選中的節點,需要注意的是,此時必須設置<span style="color: red">(node-key)</span>,其值為節點數據中的一個字段名,該字段在整棵樹中是唯一的.</div>
    <el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">
    </el-tree>
    <div style="margin-top: 30px;">
      <el-button type="primary" @click="goNextPage">跳轉頁面</el-button>
    </div>
  </div>
</template>
<script> export default { data() { return { activeIndex: ['1'], //默認展開第一塊
 data2: [{ id: 1, label: '一級 1', children: [{ id: 4, label: '二級 1-1', children: [{ id: 9, label: '三級 1-1-1' }, { id: 10, label: '三級 1-1-2' }] }] }, { id: 2, label: '一級 2', children: [{ id: 5, label: '二級 2-1' }, { id: 6, label: '二級 2-2', disabled: true //通過disabled設置禁用狀態
 }] }, { id: 3, label: '一級 3', children: [{ id: 7, label: '二級 3-1' }, { id: 8, label: '二級 3-2' }] }], defaultProps: { children: 'children', label: 'label' } } }, methods: { handleChange(val) { console.log(val); }, //跳轉下一頁面
 goNextPage() { this.$router.push({ name: 'tableTest' }) } } } </script>
<style scoped> .el-carousel__item h3 { color: #fff; font-size: 24px; opacity: 0.75; line-height: 200px; margin: 0;
} .el-carousel__item:nth-child(2n) { background-color: #333;
} .el-carousel__item:nth-child(2n+1) { background-color: #ff9933;
}

</style>