Vue腳手架+Element UI開發——快速實現表格資料分頁（帶例項和細節分析）

不就是個div嘛發表於2020-11-29
VueUI

專案背景：

最近在寫一個後臺管理系統專案的demo，需要用到element 元件的表格和分頁，所以乾脆寫篇文章，徹底把分頁這個功能搞熟，搞透，以後需要用到表格資料分頁的效果，直接在這裡Ctrl +C/V就行了，OK，直接來吧。

學習目標：

  1. 熟練餓了麼的el-table和el-pagination元件，並配合使用實現分頁。
  2. 熟練調整餓了麼元件的樣式，和儘量避免一些常見的坑。

學習內容——表格分頁：

【步驟】
.首先必須滿足前置步驟：npm i element-ui –S【這是全域性的引入】
在 main.js 中寫入以下內容：

  	import Vue from 'vue';
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	import App from './App.vue';
	
	Vue.use(ElementUI);

或者：npm install babel-plugin-component -D【這是區域性引入，這裡只是提一下，更多細節請移步別人家的部落格】

好了，前置步驟完了，就可以做最開心的事情了，那就是貼上複製，

首先是HTML的表格部分：

		<el-table
              ref="multipleTable"
              這一個東西有非常大的作用，在methods裡面寫函式的時候就是通過這個屬性來找到當前元件然後才能呼叫API
              border 加個邊框
              :header-cell-style="{ 'background-color': '#fafafa' }" 
              百度的，專案的表頭是這個顏色，所以就難得加行內樣式去覆蓋了
              
              :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              這一步是最最重要的，實現繫結的表格資料和下面的分頁變數相關聯，一般都這樣寫，固定寫法吧

              style="width: 100%; min-height: 345px"
              :default-sort="{ prop: 'zb_date', order: 'descending' }"
               配置了一個表格的排序，就按照時間那一列排
            >
            下面就是每一列的表頭，共有7列 後兩列是操作按鈕之類的
              <el-table-column prop="zb_name" label="指標名稱">
                <template slot-scope="scope"> 通過這個模板  在裡面可以幹很多事情，可以自定義內容 加個小圖示、甚至引入一個元件
                  <span style="margin-left: 10px">{{ scope.row.zb_name }}</span>
                  <i class="el-icon-question" @click="handleMeaning"></i>
                </template>
              </el-table-column>

              <el-table-column prop="zb_date" label="指標新增時間" sortable>
              </el-table-column>

              <el-table-column prop="fw_level" label="服務等級" sortable>
              </el-table-column>

              <el-table-column prop="bz_level" label="保障等級" sortable>
              </el-table-column>

              <el-table-column prop="cp_type" label="產品類別">
              </el-table-column>

              <el-table-column prop="pz_switch" label="配置開關">
                <template slot-scope="scope">
                在這裡面是引入了一個封裝好了的元件
                  <Myswitch
                    v-model="value"
                    text="開|關"
                    @click="handleClick1(scope.col)"
                  ></Myswitch>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)" 這裡本來想引入一個模態框，但是被餓了麼坑慘了，那個模態框 el-dialog 千萬不能寫在這裡
                    type="text"
                    size="small"
                    >編輯</el-button
                  >
                  這裡千萬不能寫 模態框 el-dialog 不然當你點選 任意一個編輯按鈕時，它都會把每個編輯的模態框放出來，然後模態框就會疊加，真的坑啊
                </template>
              </el-table-column>
            </el-table>

然後是HTML的分頁部分【一般都寫在el-table的下邊，大多數專案都是這樣的佈局】

<!-- 分頁部分 -->
      <el-pagination
          @size-change="handleSizeChange" 該元件自帶的分頁規則事件 用函式來實現當前頁面裝5、10條等資料
          @current-change="handleCurrentChange" 該元件自帶的分頁點選跳轉事件 用函式來實現當前頁面到點選後的頁面
          :current-page="currentPage"  繫結一個變數  實現 分頁預設選中頁數
          :page-sizes="[5, 10, 20, 40, 100]" 陣列用來裝 分頁的規則
          :page-size="pagesize"  繫結一個變數  每頁裝好多條資料 它的值一定要是陣列裡面的元素
          layout="total, sizes, prev, pager, next, jumper" 該元件的佈局配置 這個配置比較完整
          :total="tableData.length"  資料的統計 通常就是表格資料陣列的長度
        >
        </el-pagination>

好了，頁面的部分就是這些。

然後是JS部分：

data() {
    return {
      pagesize: 5, 每頁的資料
      currentPage: 1, 分頁預設選中頁數
      
      表格資料
      tableData: [
        {
          zb_name: "專線業務可實施滿足率",
          zb_date: "2020-05-02",
          fw_level: "金牌",
          bz_level: "AAA",
          cp_type: "政企專網專線;網際網路專線",
        },
        {
          zb_name: "專線業務停/復機時長",
          zb_date: "2019-05-09",
          fw_level: "銀牌",
          bz_level: "AAA",
          cp_type: "政企專網專線",
        },
        {
          zb_name: "開通交付用後即評",
          zb_date: "2018-05-08",
          fw_level: "銅牌",
          bz_level: "AAA",
          cp_type: "MPLS-VPN專線",
        },
        {
          zb_name: "專線資源勘察反饋時長",
          zb_date: "2017-05-08",
          fw_level: "普通",
          bz_level: "AAA",
          cp_type: "暫無配置",
        },
        {
          zb_name: "專線業務開通及時率",
          zb_date: "2016-05-08",
          fw_level: "金牌",
          bz_level: "AAA",
          cp_type: "政企專網專線",
        },
        {
          zb_name: "專線業務開通及時率",
          zb_date: "2015-05-08",
          fw_level: "金牌",
          bz_level: "AAA",
          cp_type: "政企專網專線",
        },
      ],
    };
  }

接下來是methods裡面的函式：

table的兩個函式 這兩個函式都是固定寫法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
        必須通過 this.$refs.multipleTable 來呼叫 它的API  
        這個在文章的上面就說過了 給table繫結了一個ref的屬性 才能呼叫它固定的API
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    分頁部分的函式
    handleSizeChange: function (size) {
      this.pagesize = size;
       console.log("分頁規則為" + this.pagesize); //分頁規則
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
       console.log("點選第" + this.currentPage + "頁"); //點選第幾頁
    },

OK，功能基本已經實現了，只是一些樣式就自己調整一下就行了
方法也很簡單，直接開啟控制檯，找到要改變的樣式，直接把它自動加好的類名找到，然後進行覆蓋即可

總結：

  1. 表格的使用在實際開發中特別的常見，大多時候其實都需要自己寫樣式之類的，還有就是餓了麼的表格合併單元格特別麻煩，非常坑
  2. 所以最好以後自己寫專案的時候還是要把原生的table標籤搞熟悉
  3. 最後就是少用餓了麼UI庫，不然以後技術得不到啥提升，我師父說的

相關文章