Vue電商後臺管理系統項目第2天-首頁添加表格動態渲染數據&分頁

時間  2019-12-15
標籤 vue 後臺 管理 系統 項目 2天 首頁 添加 表格 動態 渲染 數據 分頁 简体版
原文   原文鏈接

0x01.使用Github學習的姿式

基於昨天的內容，今天的內容須要添加幾個單文件組件，路由文件也須要作相應的增長，今天重點記錄使用Element-UI中的表格組件實現數據動態渲染的實現流程和分頁功能的實現流程。vue

多說無用，項目已經上傳到Github了，想了解每一步的詳細實現流程的能夠在Github的commit中查看提交的歷史版本，根據歷史版本進行詳細的學習。git

第一步：github

 

 

第二步：api

 

第三步：數據結構

點擊右邊的拆分按鈕，就能夠看到實現此功能在上一個版本上作了哪些修改，綠色內容部分是在上一個版本作出修改/添加的內容，注意克隆的時候要克隆最舊的版本，這樣才知道我加了什麼代碼實現了什麼功能，一步一步跟着思路走，這樣才爽。less

 

ok，立刻開始重頭戲！ide

 

0x02.Element-UI表格應用

1.首先找到Table表格，點進去以後有不少不一樣種類的表格，這個不用管，找到咱們項目須要的帶邊框表格。函數

 

 

2.查看源代碼，注意在每次查看源碼的時候都應該認真看一遍解釋和表格底部的屬性解釋（Table Attributes），將源代碼複製到user.vue組件中，而後進行修改。學習

 

3.對源碼內容進行修改，實現表格靜態數據結構。this

<template>
  <div class="user">
    <!-- 添加user頁面的表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  // data是一個函數,返回一個對象
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
</style>
寫死數據

 

4.添加右側編輯，刪除，分配角色按鈕，增長索引

找到表格選項中的自定義列模版，從操做部分開始複製源碼，而後增長合適的button按鈕，在首列中加上<el-table-column type="index" width="50"></el-table-column>代碼實現索引顯示；

注意：在template中嵌套template這種寫法能夠叫插槽，官方叫自定義列模版，經過scope.row這個屬性能夠拿到當前行的數據，若是懷疑能夠本身打印一下scope。

 

5.使用Tooltip 組件進行按鈕的文字提示

複製源碼，將源碼裏面的button按鈕替換成你的編輯、刪除、分配角色按鈕；

    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <el-button>上邊</el-button>
    </el-tooltip>

 

6.利用switch開關組件實現用戶狀態切換

複製源碼並新建一個插槽結構(自定義列模版)，而後把代碼粘貼進去，在data返回對象中添加value:true就完事了。

 

表格靜態數據結構

<template>
  <div class="user">
    <!-- 添加user頁面的表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 使用index屬性增長索引 -->
      <el-table-column type="index" width="50"></el-table-column>
      <!--  -->
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column label="用戶狀態">
        <template slot-scope="scope">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操做">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="編輯用戶" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="刪除用戶" placement="top">
            <el-button type="danger" icon="el-icon-delete"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
            <el-button type="success" icon="el-icon-share"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  // data是一個函數,返回一個對象
  data () {
    return {
      value: true,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleEdit (obj) {
      console.log(obj)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
表格靜態數據結構

 

7.調用接口方法請求數據實現表格動態數據渲染

查看對應的接口文檔得知具體的請求路徑、請求方式、傳遞的數據。

本文的內容只是演示，和github上的項目有差別，具體實現看github項目代碼。

用戶數據列表接口：

 

 實現代碼：

<template>
  <div class="user">
    <!-- 添加user頁面的表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 使用index屬性增長索引 -->
      <el-table-column type="index" width="50"></el-table-column>
      <!--  -->
      <el-table-column prop="username" label="用戶名" width="180"></el-table-column>
      <el-table-column prop="email" label="郵箱" width="180"></el-table-column>
      <el-table-column prop="mobile" label="手機號"></el-table-column>

      <el-table-column label="用戶狀態">
        <template slot-scope="scope">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操做">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="編輯用戶" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="刪除用戶" placement="top">
            <el-button type="danger" icon="el-icon-delete"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
            <el-button type="success" icon="el-icon-share"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAllList } from '@/api/users.js'
export default {
  // data是一個函數,返回一個對象
  data () {
    return {
      query: '',
      pagenum: 1,
      pagesize: 7,
      value: true,
      tableData: []
    }
  },
  methods: {
    handleEdit (obj) {
      console.log(obj)
    }
  },
  mounted () {
    getAllList({
      query: this.query,
      pagenum: this.pagenum,
      pagesize: this.pagesize
    })
      .then(result => {
        // 成功後將獲取到的數據進行覆蓋
        console.log(result)
        this.tableData = result.data.data.users
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style lang="less" scoped>
</style>
最終代碼

 

最終效果：

 

0x03.Element-UI分頁功能應用

注意看文檔中分頁各個屬性的意思！

代碼： 

<template>
  <div class="user">
    <!-- 添加user頁面的表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 使用index屬性增長索引 -->
      <el-table-column type="index" width="50"></el-table-column>
      <!--  -->
      <el-table-column prop="username" label="用戶名" width="180"></el-table-column>
      <el-table-column prop="email" label="郵箱" width="180"></el-table-column>
      <el-table-column prop="mobile" label="手機號"></el-table-column>

      <el-table-column label="用戶狀態">
        <template slot-scope="scope">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操做">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="編輯用戶" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="刪除用戶" placement="top">
            <el-button type="danger" icon="el-icon-delete"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
            <el-button type="success" icon="el-icon-share"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 實現分頁 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total-0"
    ></el-pagination>
  </div>
</template>

<script>
import { getAllList } from '@/api/users.js'
export default {
  // data是一個函數,返回一個對象
  data () {
    return {
      total: '',
      query: '',
      // 當前頁碼
      pagenum: 1,
      // 每頁顯示記錄數
      pagesize: 3,
      value: true,
      tableData: []
    }
  },
  methods: {
    handleEdit (obj) {
      console.log(obj)
    },
    handleSizeChange (val) {
      console.log(`每頁 ${val} 條`)
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      console.log(`當前頁: ${val}`)
      this.pagenum = val
      this.init()
    },
    init () {
      getAllList({
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      })
        .then(result => {
        // 成功後將獲取到的數據進行覆蓋
          console.log(result)
          this.tableData = result.data.data.users
          this.total = result.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
</style>
分頁功能

 

效果：

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程