封裝element-ui表格，我是這樣做的

子君發表於2020-07-27
封裝UI
日日加班至夜半，環視周圍無人走；

明晚八點準時走，誰不打卡誰是狗。

使用過element-ui的表格的同學應該都有這樣的體會，做一個簡單的表格還比較容易，但如果這個表格包含了頂部的按鈕，還有分頁，甚至再包含了行編輯，那開發工作量就成倍的增加，特別是在開發管理系統的時候，表格一個接一個的去開發， 即浪費時間，還對個人沒有什麼提升。今天小編帶來了自己封裝的一個表格，讓你用JSON就可以簡單的生成表格。

本文主要集中於使用說明與核心程式碼說明，完整程式碼請訪問 https://github.com/snowzijun/vue-element-table,如果覺得有用，麻煩給小編一個star,你的每一個star都是對小編的支援，當前功能比較簡陋，本倉庫將持續更新。同時您也可以微信搜尋【前端有的玩】公眾號，小編拉你進前端技術交流群。

表格需求

一般管理系統對錶格會有以下需求

  1. 可以分頁（需要有分頁條）
  2. 可以多選（表格帶核取方塊）
  3. 頂部需要加一些操作按鈕（新增，刪除等等）
  4. 表格每行行尾有操作按鈕
  5. 表格行可以編輯

如下圖為一個示例表格

如果我們直接使用element-ui提供的元件的話，那麼開發一個這樣的表格就需要使用到以下內容

  1. 需要使用表格的插槽功能，開發每一行的按鈕
  2. 需要通過樣式調整頂部按鈕，表格，分頁條的佈局樣式
  3. 需要監聽分頁的事件然後去重新整理表格資料
  4. 頂部按鈕或操作按鈕如果需要獲取表格資料，需要呼叫表格提供的api
  5. 對於有行編輯的需求，還需要通過插槽去渲染行編輯的內容，同時要控制行編輯的開關

不僅僅開發表格比較麻煩，而且還要考慮團隊協作，如果每個人實現表格的方式存在差別，那麼可能後期的維護成本也會變得很高。那怎麼辦呢？

專案安裝

安裝外掛

在使用element-ui的專案中，可以通過以下命令進行安裝

npm install vue-elementui-table -S

在專案中使用

在main.js中新增以下程式碼

import ZjTable from 'vue-element-table'

Vue.use(ZjTable)

然後即可像下文中的使用方式進行使用

表格配置

為了滿足團隊快速開發的需要，小編對上面提出來的需求進行了封裝，然後使用的時候，開發人員只需要配置一些JSON便可以完成以上功能的開發。

基礎配置

一個基礎的表格包含了資料和列資訊，那麼如何用封裝的表格去配置呢？

<template>
  <zj-table
    :columns="columns"
    :data="data"
    :pagination="false"
  />
</template>
<script>
export default {
  data() {
    return {
      // 表格的列資訊, 陣列每一項代表一個欄位，可以使用element 列屬性的所有屬性，以下僅為示例
      columns: Object.freeze([
        {
          // 表頭顯示的文字
          label: '姓名',
          // 對應資料裡面的欄位
          prop: 'name'
        },
        {
          label: '性別',
          prop: 'sex',
          // 格式化表格,與element-ui 的表格屬性相同
          formatter(row, column, cellValue) {
            return cellValue === 1 ? '男' : '女'
          }
        },
        {
          label: '年齡',
          prop: 'age'
        }
      ]),
      data: [
        {
          name: '子君',
          sex: 1,
          age: 18
        }
      ]
    }
  }
}
</script>

通過上面的配置，就可以完成一個基礎表格的開發，完整程式碼見 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/base.vue，效果如下圖所示

表格預設會顯示覆選框，也可以通過配置selectable屬性來關閉掉

新增分頁

簡單的表格用封裝之後的或未封裝的開發工作量區別並不大，我們繼續為表格新增上分頁

<template>
    <!--
    current-page.sync 表示頁碼, 新增上 .sync 在頁碼發生變化時自動同步頁碼
    page-size.sync 每頁條數
    total  總條數
    height="auto" 配置height:auto, 表格高度會根據內容自動調整，如果不指定，表格將保持充滿父容器，同時表頭會固定，不跟隨滾動條滾動
    @page-change 無論pageSize currentPage 哪一個變化，都會觸發這個事件
  -->
  <zj-table
    v-loading="loading"
    :columns="columns"
    :data="data"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    height="auto"
    @page-change="$_handlePageChange"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        // 列欄位與上例一樣，此處省略
      ]),
      data: [],
      // 當前頁碼
      currentPage: 1,
      // 每頁條數
      pageSize: 10,
      // 總條數
      total: 0,
      // 是否顯示loading
      loading: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 載入表格資料
    loadData() {
      this.loading = true
      setTimeout(() => {
        // 假設總條數是40條
        this.total = 40
        const { currentPage, pageSize } = this
        // 模擬資料請求獲取資料
        this.data = new Array(pageSize).fill({}).map((item, index) => {
          return {
            name: `子君${currentPage + (index + 1) * 10}`,
            sex: Math.random() > 0.5 ? 1 : 0,
            age: Math.floor(Math.random() * 100)
          }
        })
        this.loading = false
      }, 1000)
    },
    $_handlePageChange() {
      // 因為上面設定屬性指定了.sync,所以這兩個屬性會自動變化
      console.log(this.pageSize, this.currentPage)
      // 分頁發生變化，重新請求資料
      this.loadData()
    }
  }
}
</script>

完整程式碼請參考 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/pagination.vue

通過封裝，表格將自帶分頁功能,通過上面程式碼，實現效果如下所示,是不是變得簡單了一些。接下來我們繼續給表格新增按鈕

新增頂部按鈕

表格上面可能會有新增，刪除等等按鈕，怎麼辦呢，接下來我們繼續通過配置去新增按鈕

<template>
  <zj-table
    :buttons="buttons"
  />
</template>
<script>
export default {
  data() {
    return {
      buttons: Object.freeze([
        {
          // id 必須有而且是在當前按鈕陣列裡面是唯一的
          id: 'add',
          text: '新增',
          type: 'primary',
          icon: 'el-icon-circle-plus',
          click: this.$_handleAdd
        },
        {
          id: 'delete',
          text: '刪除',
          // rows 是表格選中的行，如果沒有選中行，則禁用刪除按鈕, disabled可以是一個boolean值或者函式
          disabled: rows => !rows.length,
          click: this.$_handleRemove
        },
        {
          id: 'auth',
          text: '這個按鈕根據許可權顯示',
          // 可以通過返回 true/false來控制按鈕是否顯示
          before: (/** rows */) => {
            return true
          }
        },
        // 可以配置下拉按鈕哦
        {
          id: 'dropdown',
          text: '下拉按鈕',
          children: [
            {
              id: 'moveUp',
              text: '上移',
              icon: 'el-icon-arrow-up',
              click: () => {
                console.log('上移')
              }
            },
            {
              id: 'moveDown',
              text: '下移',
              icon: 'el-icon-arrow-down',
              disabled: rows => !rows.length,
              click: () => {
                console.log('下移')
              }
            }
          ]
        }
      ])
    }
  },
  created() {},
  methods: {
    // 新增
    $_handleAdd() {
      this.$alert('點選了新增按鈕')
    },
    // 頂部按鈕會自動將表格所選的行傳出來
    $_handleRemove(rows) {
      const ids = rows.map(({ id }) => id)
      this.$alert(`要刪除的行id為${ids.join(',')}`)
    },
    // 關注作者公眾號
    $_handleFollowAuthor() {}
  }
}
</script>

表格頂部可以新增普通的按鈕，也可以新增下拉按鈕，同時還可以通過before來配置按鈕是否顯示，disabled來配置按鈕是否禁用，上面完整程式碼見 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/button.vue

通過上面的程式碼就可以配置出下面的表格,是不是很簡單呢？

表格頂部可以有按鈕，行尾也是可以新增按鈕的，一起來看看

行操作按鈕

一般我們會將一些單行操作的按鈕放在行尾，比如編輯，下載等按鈕，那如何給行尾配置按鈕呢?

<template>
  <zj-table
    :columns="columns"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          // 可以指定列的寬度，與element-ui原生用法一致
          width: 220,
          label: '姓名',
          prop: 'name'
        },
        // 行編輯按鈕，在表格末尾出現，自動鎖定右側
        {
          width: 180,
          label: '操作',
          // 通過 actions 指定行尾按鈕
          actions: [
            {
              id: 'follow',
              text: '關注作者',
              click: this.$_handleFollowAuthor
            },
            {
              id: 'edit',
              text: '編輯',
              // 可以通過before控制按鈕是否顯示，比如下面年齡四十歲的才會顯示編輯按鈕
              before(row) {
                return row.age < 40
              },
              click: this.$_handleEdit
            },
            {
              id: 'delete',
              text: '刪除',
              icon: 'el-icon-delete',
              disabled(row) {
                return row.sex === 0
              },
              // 為了拿到this,這裡需要用箭頭函式
              click: () => {
                this.$alert('女生被禁止刪除了')
              }
            }
          ]
        }
      ])
    }
  },
  methods: {
    // 關注作者公眾號
    $_handleFollowAuthor() {
            console.log('微信搜尋【前端有的玩】，這是對小編最大的支援')
    },
    /**
     * row 這一行的資料
     */
    $_handleEdit(row, column) {
      this.$alert(`點選了姓名為【${row.name}】的行上的按鈕`)
    }
  }
}
</script>

行操作按鈕會被凍結到表格最右側，不會跟隨滾動條滾動而滾動，上面完整程式碼見, https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/button.vue

通過上面的程式碼就可以完成以下效果

最後再來一起看看行編輯

行編輯

比如上例，我希望點選行尾的編輯按鈕的時候，可以直接在行上面編輯使用者的姓名與性別，如何配置呢?

<template>
  <zj-table
    ref="table"
    :columns="columns"
    :data="data"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: Object.freeze([
        {
          label: '姓名',
          prop: 'name',
          editable: true,
          field: {
            componentType: 'input',
            rules: [
              {
                required: true,
                message: '請輸入姓名'
              }
            ]
          }
        },
        {
          label: '性別',
          prop: 'sex',
          // 格式化表格,與element-ui 的表格屬性相同
          formatter(row, column, cellValue) {
            return cellValue === '1' ? '男' : '女'
          },
          editable: true,
          field: {
            componentType: 'select',
            options: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '0'
              }
            ]
          }
        },
        {
          label: '年齡',
          prop: 'age',
          editable: true,
          field: {
            componentType: 'number'
          }
        },
        {
          label: '操作',
          actions: [
            {
              id: 'edit',
              text: '編輯',
              // 如果當前行啟用了編輯，則不顯示編輯按鈕
              before: row => {
                return !this.editIds.includes(row.id)
              },
              click: this.$_handleEdit
            },
            {
              id: 'save',
              text: '儲存',
              // 如果當前行啟用了編輯，則顯示儲存按鈕
              before: row => {
                return this.editIds.includes(row.id)
              },
              click: this.$_handleSave
            }
          ]
        }
      ]),
      data: [
        {
          // 行編輯必須指定rowKey欄位，預設是id,如果修改為其他欄位，需要給表格指定row-key="欄位名"
          id: '0',
          name: '子君',
          sex: '1',
          age: 18
        },
        {
          // 行編輯必須指定rowKey欄位，預設是id,如果修改為其他欄位，需要給表格指定row-key="欄位名"
          id: '1',
          name: '子君1',
          sex: '0',
          age: 18
        }
      ],
      editIds: []
    }
  },
  methods: {
    $_handleEdit(row) {
      // 通過呼叫 startEditRow 可以開啟行編輯
      this.$refs.table.startEditRow(row.id)
      // 記錄開啟了行編輯的id
      this.editIds.push(row.id)
    },
    $_handleSave(row) {
      // 點選儲存的時候，通過endEditRow 結束行編輯
      this.$refs.table.endEditRow(row.id, (valid, result, oldRow) => {
        // 如果有表單驗證，則valid會返回是否驗證成功
        if (valid) {
          console.log('修改之後的資料', result)
          console.log('原始資料', oldRow)
          const index = this.editIds.findIndex(item => item === row.id)
          this.editIds.splice(index, 1)
        } else {
          // 如果校驗失敗，則返回校驗的第一個輸入框的異常資訊
          console.log(result)
          this.$message.error(result.message)
        }
      })
    }
  }
}
</script>

不需要使用插槽就可以完成行編輯，是不是很開心。上述完整程式碼見 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/row-edit.vue

效果如下圖所示:

其他功能

除了上面的功能之外，表格還可以配置其他許多功能，比如

  1. 可以指定欄位為連結列，需要給列配置link屬性
  2. 可以通過插槽自定義頂部按鈕，行操作按鈕，行欄位等
  3. 可以在按鈕區域右側通過插槽配置其他內容
  4. 其他等等

表格開發說明

通過上面的程式碼示例，我們已經知道了封裝之後的表格可以完成哪些事情，接下來一起來看看錶格是如何實現的。完整程式碼見 https://github.com/snowzijun/vue-element-table/tree/master/src/components/zj-table

表格佈局

整個表格是通過JSX來封裝的，因為JSX使用起來更加靈活。對於我們封裝的表格，我們從豎向可以分為三部分，分別是頂部按鈕區，中間表格區，底部分頁區，如何去實現三個區域的佈局呢，核心程式碼如下

render(h) {
    // 按鈕區域
    const toolbar = this.$_renderToolbar(h)
    // 表格區域
    const table = this.$_renderTable(h)
    // 分頁區域
    const page = this.$_renderPage(h)

    return (
      <div class="zj-table" style={{ height: this.tableContainerHeight }}>
        {toolbar}
        {table}
        {page}
      </div>
    )
  }

通過三個render函式分別渲染對應區域，然後將三個區域組合在一起。

渲染表格列

通過前文的講解,我們可以將表格的列分為以下幾種

  1. 常規列
  2. 行編輯列
  3. 操作按鈕列
  4. 插槽列
  5. 連結列(文件後續完善)
  6. 巢狀列(文件後續完善)
    $_renderColumns(h, columns) {
      // 整體是否排序
      let sortable = this.sortable ? 'custom' : false
      return columns
        .filter(column => {
          const { hidden } = column
          if (hidden !== undefined) {
            if (typeof hidden === 'function') {
              return hidden({
                columns,
                column
              })
            }
            return hidden
          }
          return true
        })
        .map(column => {
          const {
            useSlot = false,
            // 如果存在操作按鈕，則actions為非空陣列
            actions = [],
            // 是否可編輯列， 對於可編輯列需要動態啟用編輯
            editable = false,
            // 是否有巢狀列
            nests,
            // 是否可點選
            link = false
          } = column
          let newSortable = sortable
          if (column.sortable !== undefined) {
            newSortable = column.sortable ? 'custom' : false
          }
          column = {
            ...column,
            sortable: newSortable
          }
          if (nests && nests.length) {
            // 使用巢狀列
            return this.$_renderNestColumn(h, column)
          } else if (editable) {
            // 使用編輯列
            return this.$_renderEditColumn(h, column)
          } else if (useSlot) {
            // 使用插槽列
            return this.$_renderSlotColumn(h, column)
          } else if (actions && actions.length > 0) {
            // 使用操作列
            column.sortable = false
            return this.$_renderActionColumn(h, column)
          } else if (link) {
            // 使用連結列
            return this.$_renderLinkColumn(h, column)
          } else {
            // 使用預設列
            return this.$_renderDefaultColumn(h, column)
          }
        })
    },

行編輯列

當前表格行編輯支援input,select,datepicker,TimeSelect,InputNumber等元件，具體渲染程式碼如下所示

// 編輯單元格
    $_renderEditCell(h, field) {
      const components = {
        input: Input,
        select: ZjSelect,
        date: DatePicker,
        time: TimeSelect,
        number: InputNumber
      }
      const componentType = field.componentType
      const component = components[componentType]
      if (component) {
        return this.$_renderField(h, field, component)
      } else if (componentType === 'custom') {
        // 如果自定義，可以通過component指定元件
        return this.$_renderField(h, field, field.component)
      }
      return this.$_renderField(h, field, Input)
    },
    $_renderField(h, field, Component) {
      // 編輯行的id欄位
      const { rowId, events = {}, nativeEvents = {} } = field

      const getEvents = events => {
        const newEvents = {}
        Object.keys(events).forEach(key => {
          const event = events[key]
          newEvents[key] = (...rest) => {
            const args = [
              ...rest,
              {
                rowId,
                row: this.editRowsData[rowId],
                value: this.editRowsData[rowId][field.prop]
              }
            ]
            return event(...args)
          }
        })
        return newEvents
      }
      // 事件改寫
      const newEvents = getEvents(events)
      const newNativeEvents = getEvents(nativeEvents)
      return (
        <Component
          size="small"
          on={newEvents}
          nativeOn={newNativeEvents}
          v-model={this.editRowsData[rowId][field.prop]}
          {...{
            attrs: field,
            props: field
          }}
        />
      )
    }

總結

這個表格包含了許多功能，文章長度優先，如果覺得有用，可以通過訪問 https://github.com/snowzijun/vue-element-table 檢視完整程式碼，本倉庫程式碼及文件小編將持續完善，歡迎star。

結語

不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸。 ——文森特・梵高

相關文章