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

0x01.使用Github學習的姿勢

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

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

第一步：

 

 

第二步：

 

第三步：

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

 

ok，馬上開始重頭戲！

 

0x02.Element-UI表格應用

1.首先找到Table表格，點進去之后有很多不同種類的表格，這個不用管，找到我們項目需要的帶邊框表格。

 

 

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

 

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

<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>

 

效果：