1. 用戶列表組件UI結(jié)構(gòu)的組成

1.1 頭部是一個面包屑?（Breadcrumb）導(dǎo)航區(qū)域

1.2 白色區(qū)域是一個卡片（Card）視圖

1.3 卡片 （Card）視圖中嵌套了?輸入框（Input ）、按鈕（Button）、表單（Form）、分頁（Pagination ）

Breadcrumb 面包屑 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/breadcrumb.html

2. 用戶列表組件實現(xiàn)步驟

2.1 首先繪制面包屑?（Breadcrumb）導(dǎo)航區(qū)域，根據(jù)需求，在官網(wǎng)找到合適的例子復(fù)制代碼進(jìn)行按需改造

?2.1.1 復(fù)制頁面結(jié)構(gòu)后，打開用戶組件 Users.vue 進(jìn)行結(jié)構(gòu)改造和梳理

?2.1.2 頁面效果，由于Breadcrumb 屬性中，separator 的分隔符默認(rèn)是 /?

?2.1.3? ?所以需要安裝 element-plus-icons-vue 組件依賴，才能顯示如下效果。

注意：如果使用的是element-ui，直接省略安裝這一步，因為在element-ui 中，通過使用類屬性 separator-class="el-icon-arrow-right" 就可以顯示圖標(biāo)分隔符了。

2.1.4? 安裝步驟?

1.打開可視化面板，選擇依賴--安裝依賴--運(yùn)行依賴

?2.? 搜索?element-plus-icoons

?2.1.5? 依賴安裝完成后，接著進(jìn)行全局引入

?由于是學(xué)習(xí)探索階段，全局引入后，頁面直接使用屬性? separator-icon="arrowRight" ，分隔圖標(biāo)顯示不出來。暫時先放這里。有那個大佬看到這里，知道的，還請留個言告知一二。

?2.1.6? 通過查官網(wǎng)知道，element-plus 也可以通過?separator-class 來設(shè)置并顯示圖標(biāo)分隔符。所以就直接使用這個了。

?separator-class="el-icon-arrow-right"

?2.1.7 效果

注意：由于所用到的組件是按需導(dǎo)入，所以每使用到一個新的組件，務(wù)必進(jìn)行導(dǎo)入后方可生效

2.2? 繪制卡片 （Card）區(qū)域內(nèi)容

• 每次在官網(wǎng)復(fù)制例子時，會有一些多余的類和屬性。所以，首先應(yīng)該做的，把結(jié)構(gòu)理清后，需要刪除一些不需要的類和屬性。等需要用到的時候，再去添加回來。

• 如下圖

2.2.1 結(jié)構(gòu)梳理完成，由于面包屑和卡片區(qū)域距離比較近，需要給面包屑設(shè)置一個距離，把卡片稍微向下擠一點(diǎn)。

?2.2.2 所以，那就需要把默認(rèn)樣式給覆蓋掉。把自定義的樣式，寫在全局引用的樣式文件當(dāng)中，方便其他組件頁面使用到該卡片組件時，也能生效。

• 通過類名（el-breadcrumb）選擇器，選擇面包屑視圖，設(shè)置它的下拉距，從而撐開與卡片視圖之間的距離

• ?接著去除卡片視圖陰影，也是通過（卡片視圖）類選擇器進(jìn)行操作

?注意：每一個組件，都是一個類選擇器

2.2.3 效果

?2.3 接著繪制卡片（Card）區(qū)域嵌套的?搜索區(qū)域（Input ）、按鈕（Button）、表單（Form）、分頁（Pagination ）

2.3.1??搜索區(qū)域（Input ）、按鈕（Button）

• 搜索區(qū)域和按鈕區(qū)域繪制

• 由于搜索框占滿了全屏，后邊的按鈕無法正常顯示?

• ?接下來，需要使用到柵格系統(tǒng)，給搜索框設(shè)置固定的寬度，讓它和按鈕正常擺放在一行中。?

1. ?使用柵格系統(tǒng)中 el-row 代表每一行
2. ?el-col 代表著每一列，每一列占的寬度，使用 :span 來指定。
3. 使用 :gutter 來指定，每一行中列之間的距離

?注意：在柵格系統(tǒng)中，每一行總共設(shè)置為24 小格子?

• 代碼修改?

<!-- 卡片視圖區(qū)域 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 搜索與添加區(qū)域 -->
          <el-input placeholder="請輸入內(nèi)容" >
          <template #append>
            <el-icon><search /></el-icon>
          </template>
          </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">添加用戶</el-button>
      </el-col>
    </el-row>
  </el-card>

• 頁面效果?

?2.3.1??表單（Form）、分頁（Pagination ）

1.根據(jù)接口文檔，動態(tài)請求數(shù)據(jù)填充表單

?2. 理清楚了請求路徑和方法以及參數(shù)后，接下來，發(fā)起后臺請求。

• 首先定義基本數(shù)據(jù)結(jié)構(gòu)。??

• 接著，在頁面創(chuàng)建的時候，調(diào)用created 生命周期函數(shù)，發(fā)起一次數(shù)據(jù)請求

?注意：1.由于get 會返回一個 promise 對象，所以為了簡化promise 操作，需要添加 async 和 await 來優(yōu)化本次的異步操作。

2. 使用到了 await后 ,該請求就會得到一個數(shù)組對象。緊接著，需要對該數(shù)據(jù)對象進(jìn)行解構(gòu)賦值。

• ??刷新頁面，查看數(shù)據(jù)是不是已經(jīng)有了

3. 接下來，把數(shù)據(jù)保存在 data 數(shù)據(jù)區(qū)定義的對象上面

?2.3.3? 數(shù)據(jù)獲取完成后，接下來渲染表單（Form）

• 首先引入 table 組件以及 table-column 模板列

• ?接著，通過 :data 為表格指定 數(shù)據(jù)源

• ?通過 label 添加模板標(biāo)題,
• ?通過 prop 指定當(dāng)前 label 標(biāo)題列綁定值

• prop 屬性的字段是根據(jù)文檔提供來填寫的?

• ?頁面效果

2.3.4?由于列表中，有一項狀態(tài)的值，需要渲染成開關(guān)，并且響應(yīng)返回值是True或False。所以接下來，需要對數(shù)據(jù)進(jìn)行改造。以及頁面美化。

• 通過 border 屬性為表單添加邊框線
• 通過 stripe 屬性，添加隔行變色功能

• ?希望把表單和搜索框以及按鈕之間，有一定的距離。還是在全局樣式表中，通過類選擇器進(jìn)行更改樣式

• ?添加樣式后，效果

• ?為表單添加索引列，只需要添加?type="index" 即可

• ?效果?

2.3.5 列表中狀態(tài)改造

• 把列表中的bool 值渲染成開關(guān)效果。如果該屬性的值是true,顯示為開。否則為關(guān)

實現(xiàn)思路:

通過作用域插槽來實現(xiàn)

1. 在狀態(tài)模板內(nèi)容中，放置一個 template?

2. 定義一個?v-slot="scope"?來接收一下數(shù)據(jù)。

3. 其中，這個?scope 身上有一個屬性，就是scope.row 它就代表當(dāng)前這一行數(shù)據(jù)

• 引用 switch 開關(guān)組件

• 效果

總結(jié)：

1. 狀態(tài)列，首先它是屬于一個單元格，那也就肯定屬于某一行。所以只要拿到狀態(tài)列所在的行的那一行數(shù)據(jù)，就可以通過 . 出來狀態(tài)的具體屬性值。然后就可以按需來渲染狀態(tài)的效果了。

3. 組件代碼

3.1 全局樣式表代碼

/* 全局樣式表 */
html,body,#app{
    /* 高度占100% */
    height: 100%; 
    /* margin重置為0 */
    margin: 0;
    /* padding重置為0 */
    padding: 0;
}
.el-breadcrumb{
    /* 設(shè)置下拉距 */
    margin-bottom: 15px;
    /* 重置字體大小 */
    font-size: 12px;
}
.el-card{
    box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.el-table{
    margin-top: 15px;
    font-size: 12px;
}

3.2 Users.vue 組件代碼

<template>
  <div>
    <!-- 面包屑導(dǎo)航區(qū)域 -->

  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
    <el-breadcrumb-item>用戶管理</el-breadcrumb-item>
    <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片視圖區(qū)域 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 搜索與添加區(qū)域 -->
          <el-input placeholder="請輸入內(nèi)容" >
          <template #append>
            <el-icon><search /></el-icon>
          </template>
          </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">添加用戶</el-button>
      </el-col>
    </el-row>
    <!-- 用戶列表區(qū)域  -->
    <el-table :data="userlist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="郵箱" prop="email"></el-table-column>
      <el-table-column label="電話" prop="mobile"></el-table-column>
      <el-table-column label="角色" prop="role_name"></el-table-column>
      <el-table-column label="狀態(tài)" prop="mg_state">
        <template v-slot="scope">
          <el-switch v-model="scope.row.mg_state" />
        </template>
      </el-table-column>
      <el-table-column label="操作"></el-table-column>
    </el-table>
  </el-card>
  </div>
</template>

<script >
export default {
  data () {
    return {
      // 獲取用戶列表的參數(shù)對象
      queryInfo: {
        query: '', // 查詢參數(shù)
        pagenum: 1, // 當(dāng)前頁碼
        pagesize: 2 // 每頁顯示條數(shù)
      },
      // 用戶列表
      userlist: [],
      // 總數(shù)據(jù)條數(shù)
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) return this.$message.error('獲取用戶列表失敗')
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

3.3 按需導(dǎo)入 element.js 代碼?

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElSubmenu,
  ElMenuItem,
  ElIcon,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElCard,
  ElCol,
  ElTableColumn,
  ElTable,
  ElSwitch
} from 'element-plus'

import {
  Location,
  Menu as IconMenu,
  Search
} from '@element-plus/icons'

import {
  ArrowRight
} from '@element-plus/icons-vue'

export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.use(ElMenu)
  app.use(ElSubmenu)
  app.use(ElMenuItem)
  app.use(ElIcon)
  app.use(ElBreadcrumb)
  app.use(ElBreadcrumbItem)
  app.use(ElCard)
  app.use(ElCol)
  app.use(ElTable)
  app.use(ElTableColumn)
  app.use(ElSwitch)
  app.component('location', Location)
  app.component('iconMenu', IconMenu)
  app.component('arrowRight', ArrowRight)
  app.component('search', Search)
  app.config.globalProperties.$message = ElMessage
}

以上出自：

【黑馬程序員】前端開發(fā)之Vue項目實戰(zhàn)_Element-UI【配套源碼+筆記】_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=43

【黑馬程序員】前端開發(fā)之Vue項目實戰(zhàn)_Element-UI【配套源碼+筆記】_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=44【黑馬程序員】前端開發(fā)之Vue項目實戰(zhàn)_Element-UI【配套源碼+筆記】_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=45

【黑馬程序員】前端開發(fā)之Vue項目實戰(zhàn)_Element-UI【配套源碼+筆記】_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=46&spm_id_from=pageDriver

【黑馬程序員】前端開發(fā)之Vue項目實戰(zhàn)_Element-UI【配套源碼+筆記】_嗶哩嗶哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=47&spm_id_from=pageDriver文章來源地址http://www.zghlxwxcb.cn/news/detail-405655.html

到了這里，關(guān)于Vue3+Element-Plus 實現(xiàn)用戶列表頁面的UI結(jié)構(gòu)及動態(tài)加載表單功能 三一的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！