Vue實戰篇二十三：卡片風格與清單風格的切換

系列文章目錄

Vue基礎篇一：編寫第一個Vue程式

Vue基礎篇二：Vue元件的核心概念

Vue基礎篇三：Vue的計算屬性與偵聽器

Vue基礎篇四：Vue的生命周期（秒殺案例實戰）

Vue基礎篇五：Vue的指令

Vue基礎篇六：Vue使用JSX進行動态渲染

Vue提高篇一：使用Vuex進行狀态管理

Vue提高篇二：使用vue-router實作靜态路由

Vue提高篇三：使用vue-router實作動态路由

Vue提高篇四：使用Element UI元件庫

Vue提高篇五：使用Jest進行單元測試

Vue提高篇六：使用Vetur+ESLint+Prettier插件提升開發效率

Vue實戰篇一：使用Vue搭建注冊登入界面

Vue實戰篇二：實作郵件驗證碼發送

Vue實戰篇三：實作使用者注冊

Vue實戰篇四：建立多步驟表單

Vue實戰篇五：實作檔案上傳

Vue實戰篇六：表格渲染動态資料

Vue實戰篇七：表單校驗

Vue實戰篇八：實作彈出對話框進行互動

Vue實戰篇九：使用省市區級聯選擇插件

Vue實戰篇十：響應式布局

Vue實戰篇十一：父元件擷取子元件資料的正常方法

Vue實戰篇十二：多項選擇器的實際運用

Vue實戰篇十三：實戰分頁元件

Vue實戰篇十四：前端excel元件實作資料導入

Vue實戰篇十五：表格資料多選在實際項目中的技巧

Vue實戰篇十六：導航菜單

Vue實戰篇十七：用樹型元件實作一個知識目錄

Vue實戰篇十八：搭建一個知識庫架構

Vue實戰篇十九：使用printjs列印表單

Vue實戰篇二十：自定義表格合計

Vue實戰篇二十一：實戰Prop的雙向綁定

Vue實戰篇二十二：生成二維碼

文章目錄

系列文章目錄
一、背景
二、卡片風格
三、清單風格
四、實作兩種風格的切換
五、效果示範
六、源碼

一、背景

在前端顯示頁面中，我們有時候喜歡用卡片風格，比如說這樣的：

有時候喜歡用清單風格，比如說這樣的：

但我們更喜歡把兩種風格結合在一起，在同一個頁面實作這兩種風格的自由切換。

二、卡片風格

将角色資訊通過el-card來渲染出卡片風格的頁面

<!-- 卡片風格 -->
    <el-row>
      <el-col
        v-for="item in roles"
        :key="item.id"
        :span="5"
        style="margin-bottom:"
        :offset="1"
      >
        <el-card>
          <div slot="header" class="clearfix">
            <i class="el-icon-user" /><span style="margin-left:">{{
              item.roleName
            }}</span>
            <div
              style="display: inline-block; float: right; cursor:"
              @click="doEdit(item.id)"
            >
              <el-tooltip effect="dark" content="編輯角色" placement="top">
                <i class="el-icon-edit-outline" style="margin-left:" />
              </el-tooltip>
            </div>
          </div>
          <div>
            <ul class="role-info">
              <li>
                <div class="role-left">描述資訊：{{ item.description }}</div>
              </li>
              <li>
                <div class="role-left">
                  建立時間：{{ parseTime(item.createTime) }}
                </div>
              </li>
            </ul>
          </div>
          <div
            style="display: inline-block; float: left; cursor:"
            @click="doAssignPemission(item.id, item.roleName)"
          >
            <el-tooltip effect="dark" content="權限配置設定" placement="bottom">
              <i class="el-icon-menu" />
            </el-tooltip>
          </div>
          <div
            style="display: inline-block; float: right; cursor:"
            @click="doDelete(item.id)"
          >
            <el-tooltip effect="dark" content="删除角色" placement="bottom">
              <i class="el-icon-delete" style="margin-left:" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
 <script>export default {
  name: '角色管理',
  data() {
    return {
      // 角色清單
      roles: [],
      ...
    }
  },
  ...</script>

三、清單風格

将角色資訊通過el-table來渲染出清單風格的頁面

<!-- 清單風格 -->
    <el-table
      v-else
      ref="table"
      :data="roles"
      style="width: 100%; font-size:"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        width="150"
        prop="roleName"
        label="角色名稱"
      />

      <el-table-column
        :show-overflow-tooltip="true"
        prop="createTime"
        width="155"
        label="建立時間"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述資訊" />
      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            round
            @click="doEdit(scope.row.id)"
          >編輯角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doDelete(scope.row.id)"
          >删除角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doAssignPemission(scope.row.id,scope.row.roleName)"
          >配置設定權限</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <script>export default {
  name: '角色管理',
  data() {
    return {
      // 角色清單
      roles: [],
      ...
    }
  },
  ...</script>

四、實作兩種風格的切換

增加一個切換按鈕，并增加cardType變量，為true時顯示卡片風格，為false時顯示清單風格，使用者點選此按鈕可自由切換兩種風格

<el-button-group class="card-toggle-table">
        <el-tooltip
          v-if="cardType"
          class="item"
          effect="dark"
          content="切換成表格"
          placement="top-start"
        >
          <el-button size="mini" plain icon="el-icon-s-grid" @click="toggle" />
        </el-tooltip>
        <el-tooltip
          v-else
          class="item"
          effect="dark"
          content="切換成卡片"
          placement="top-start"
        >
          <el-button
            size="mini"
            plain
            icon="el-icon-bank-card"
            @click="toggle"
          />
        </el-tooltip>
      </el-button-group>
      
 <script>export default {
  name: '角色管理',
  data() {
    return {
      // 預設為卡片風格，為false時切換成清單風格
      cardType: true,
      ...
    }
  },
  ...
  methods: {
  // 點選切換風格
  toggle() {
      this.cardType = !this.cardType
    }
    ...
  }</script>

在兩種顯示風格上加上v-if與v-else判斷

<!-- 如果cardType為true,則顯示卡片風格 -->
    <el-row v-if="cardType">
      <el-col
        v-for="item in roles"
        :key="item.id"
        :span="5"
        style="margin-bottom:"
        :offset="1"
      >
        <el-card>
          <div slot="header" class="clearfix">
            <i class="el-icon-user" /><span style="margin-left:">{{
              item.roleName
            }}</span>
            <div
              style="display: inline-block; float: right; cursor:"
              @click="doEdit(item.id)"
            >
              <el-tooltip effect="dark" content="編輯角色" placement="top">
                <i class="el-icon-edit-outline" style="margin-left:" />
              </el-tooltip>
            </div>
          </div>
          <div>
            <ul class="role-info">
              <li>
                <div class="role-left">描述資訊：{{ item.description }}</div>
              </li>
              <li>
                <div class="role-left">
                  建立時間：{{ parseTime(item.createTime) }}
                </div>
              </li>
            </ul>
          </div>
          <div
            style="display: inline-block; float: left; cursor:"
            @click="doAssignPemission(item.id, item.roleName)"
          >
            <el-tooltip effect="dark" content="權限配置設定" placement="bottom">
              <i class="el-icon-menu" />
            </el-tooltip>
          </div>
          <div
            style="display: inline-block; float: right; cursor:"
            @click="doDelete(item.id)"
          >
            <el-tooltip effect="dark" content="删除角色" placement="bottom">
              <i class="el-icon-delete" style="margin-left:" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 如果cardType為false則顯示清單風格 -->
    <el-table
      v-else
      ref="table"
      :data="roles"
      style="width: 100%; font-size:"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        width="150"
        prop="roleName"
        label="角色名稱"
      />

      <el-table-column
        :show-overflow-tooltip="true"
        prop="createTime"
        width="155"
        label="建立時間"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述資訊" />
      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            round
            @click="doEdit(scope.row.id)"
          >編輯角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doDelete(scope.row.id)"
          >删除角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doAssignPemission(scope.row.id,scope.row.roleName)"
          >配置設定權限</el-button>
        </template>
      </el-table-column>
    </el-table>

五、效果示範

六、源碼

前端

https://gitee.com/zhuhuix/startup-frontendhttps://github.com/zhuhuix/startup-frontend
後端

https://gitee.com/zhuhuix/startup-backendhttps://github.com/zhuhuix/startup-backend

Vue實戰篇二十三：卡片風格與清單風格的切換

系列文章目錄

文章目錄

一、背景

二、卡片風格

三、清單風格

四、實作兩種風格的切換

五、效果示範

六、源碼

繼續閱讀

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

雲伺服器部署項目：vue-cli 部署服務配置

VueX 做狀态管理( state , mutations , getters , actions 概念)

UVA 116 Unidirectional TSP

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目