? ? ? ? 組件名為commonTable，主要是基于element-ui中的表格組件進(jìn)行二次封裝的組件，集成了常用的表格功能，除默認(rèn)內(nèi)容的顯示外，還包括以下幾點(diǎn)：

? ? ? ? 1. 狀態(tài)的篩選和顯示；

? ? ? ? 2. 操作按鈕的顯示和方法綁定；

? ? ? ? 3. 自定義具名插槽內(nèi)容的封裝；

? ? ? ? 4. 表格內(nèi)容的翻頁(yè)。

????????除了提供的常用功能外，主要是希望可以通過(guò)組件的封裝和應(yīng)用，進(jìn)一步理解和應(yīng)用SPA框架主推的數(shù)據(jù)驅(qū)動(dòng)理念，真正通過(guò)數(shù)據(jù)來(lái)描述頁(yè)面應(yīng)用。我們來(lái)看具體代碼：

? ? ? ? 應(yīng)用實(shí)例：

<!-- 表格組件 -->
    <CommonTable :tableData="tableData" :tableConfig="tableConfig" :pageConfig="pageConfig"></CommonTable>

?????????組件包含三個(gè)主要參數(shù)，分別是：

? ? ? ? tableData：表格組件的數(shù)據(jù)內(nèi)容，通常通過(guò)后端接口獲??；

// 表格數(shù)據(jù)內(nèi)容
        tableData: [
            {
                "id": "001",
                "name": "小明",
                "sex": 1,
                "address": "北京市"
            },
            {
                "id": "002",
                "name": "小紅",
                "sex": 2,
                "address": "上海市"
            }
        ],

? ? ? ? tableConfig：表格組件的配置，通過(guò)這個(gè)配置，組件自動(dòng)生成表格；

// 表格配置
        tableConfig: [
          {
              label: "名稱",
              prop: "name",
              sortable: true,
          },
          {
              label: "性別",
              prop: "sex",
              type: "status",
              callback: (scope) => {
                switch(scope.row.sex) {
                  case 1 :
                    return {
                      text: '男',
                      color: 'blue'
                    }
                  case 2 :
                    return {
                      text: '女',
                      color: 'red'
                    }
                }
              }
          },
          {
              label: "地址",
              prop: "address",
              type: "slot"
          },
          {
              label: "操作",
              prop: "operate",
              type: "operate",
              operateList: (scope) => {
                return [
                  {
                    text: "編輯",
                    callback: (scope) => {console.log("編輯"+scope.row)}
                  },
                  {
                    text: "刪除",
                    color: "red",
                    callback: () => {console.log("刪除"+scope.row)}
                  },
                ]
              }
          },
        ],

? ? ? ? pageConfig：表格組件的分頁(yè)配置，翻頁(yè)等方法也都在這里配置，如果不寫(xiě)，默認(rèn)沒(méi)有分頁(yè)功能。

// 分頁(yè)配置
        pageConfig: {
          sizeChange: (val) => {console.log('sizeChange--'+val)},
          currentChange: (val) => {console.log('currentChange--'+val)},
          pageSizes: [10, 20, 50],
          layout: "total, prev, pager, next, sizes",
          pageSize: 10,
          total: 100,
          currentPage: 1
        }

? ? ? ?表格主要分為四種不同類型的內(nèi)容，通過(guò)type來(lái)區(qū)分不同類型，當(dāng)沒(méi)有type值的時(shí)候，就傳入默認(rèn)的數(shù)據(jù)內(nèi)容，下面詳細(xì)看下代碼：

1. 自定義類型：（type: slot）

? ? ? ? 通過(guò)vue的具名插槽的功能，在組件中插入同名的插槽，插槽名為prop屬性內(nèi)容，插槽內(nèi)容可以自定義，通過(guò)scope傳入表格當(dāng)前行的數(shù)據(jù)來(lái)進(jìn)行數(shù)據(jù)操作。vue提供了一個(gè)方法來(lái)進(jìn)行動(dòng)態(tài)的具名插槽綁定，用v-slot動(dòng)態(tài)綁定插槽名。

<!-- 示例 -->
    <CommonTable :tableData="tableData" :tableConfig="tableConfig" :pageConfig="pageConfig">
        <template v-slot:self="{ scope }">
            <div>{{ scope.row }}</div>
        </template>
    </CommonTable>

<!-- 自定義類型 -->
          <el-table-column
            v-if="item.type === 'slot'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <slot :name="item.prop" :scope="scope"></slot>
            </template>
          </el-table-column>

2.狀態(tài)類型：（type: status）

? ? ? ? 表格中經(jīng)常會(huì)用到一些用來(lái)標(biāo)識(shí)狀態(tài)的標(biāo)簽，例如性別、身份等。并且經(jīng)常會(huì)遇到需要對(duì)后端接口提供的數(shù)據(jù)進(jìn)行轉(zhuǎn)義，例如等于1的時(shí)候是男性，等于2的時(shí)候是女性?？梢栽诮M件中提前封裝好需要的狀態(tài)類型標(biāo)簽，并且內(nèi)容和顏色，可以通過(guò)text和color兩種屬性來(lái)自由搭配。保證了全局標(biāo)簽樣式的統(tǒng)一性的同時(shí)，也提供了一定的可自定義化。

<!-- 狀態(tài)類型 -->
          <el-table-column
            v-if="item.type === 'status'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <span v-if="item.callback(scope).color === 'blue'" class="status-label label-blue">{{ item.callback(scope).text }}</span>
              <span v-if="item.callback(scope).color === 'red'" class="status-label label-red">{{ item.callback(scope).text }}</span>
              <span v-if="!item.callback(scope).color">{{ item.callback(scope).text }}</span>
            </template>
          </el-table-column>

?3. 操作類型：（type: operate）

? ? ? ? 表格最后一列通常包含相應(yīng)的操作，例如編輯、刪除等。在組件中封裝好操作類型，在使用的時(shí)候可以靈活搭配操作按鈕的展示內(nèi)容和綁定的方法。operateList返回按鈕列表，通過(guò)名為show的屬性可以根據(jù)不同的條件應(yīng)用不同的按鈕，通過(guò)callback屬性來(lái)綁定按鈕的方法。

<!-- 操作類型 -->
          <el-table-column
            v-if="item.type === 'operate'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <template v-for="(operateItem, operateIndex) in item.operateList(scope)">
                <span
                  v-if="operateItem.show === undefined || operateItem"
                  :key="operateIndex"
                  @click="operateItem.callback(scope)"
                  :class="['operate-button', operateItem.color === 'red' ? 'operate-red' : '']">{{ operateItem.text }}</span>
              </template>
            </template>
          </el-table-column>

4. 默認(rèn)類型：（type: none）

????????當(dāng)type值不存在的時(shí)候，默認(rèn)展示prop屬性對(duì)應(yīng)的表格數(shù)據(jù)內(nèi)容。

<!-- 默認(rèn)類型 -->
          <el-table-column
            v-if="!item.type"
            :key="index+index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>

????????總結(jié)一下，在element-ui的table組件和pagination組件的基礎(chǔ)上進(jìn)行封裝，以達(dá)成全局?jǐn)?shù)據(jù)驅(qū)動(dòng)渲染表格內(nèi)容，實(shí)現(xiàn)表格展示和操作的目的。

四種類型分別是：

????????自定義類型、標(biāo)簽類型、操作類型和默認(rèn)類型。

三個(gè)主要參數(shù)是：

????????tableData（數(shù)據(jù)內(nèi)容）、tableConfig（表格配置）、pageConfig（分頁(yè)配置）

屬性說(shuō)明：

? ? ? ? 1. 通過(guò)label屬性或者text屬性參數(shù)來(lái)展示表格需要顯示的內(nèi)容；

? ? ? ? 2. 通過(guò)prop屬性來(lái)綁定對(duì)應(yīng)數(shù)據(jù)的字段名；

? ? ? ? 3. 通過(guò)show屬性來(lái)綁定內(nèi)容是否顯示的條件，通過(guò)color屬性綁定內(nèi)容樣式；

? ? ? ? 4. 通過(guò)callback屬性綁定需要的操作方法，callback中的scope參數(shù)綁定當(dāng)前數(shù)據(jù)內(nèi)容。

組件優(yōu)勢(shì)：

? ? ? ? 全局?jǐn)?shù)據(jù)驅(qū)動(dòng)，統(tǒng)一表格組件的同時(shí)，提供了表格展示內(nèi)容和操作方法的靈活綁定，并提供了動(dòng)態(tài)具名插槽進(jìn)行內(nèi)容自定義。

看下渲染后的效果：

最后附上完整組件代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-725762.html

<template>
    <div class="common-table">
      <el-table
        :stripe="stripe"
        :height="height"
        :data="tableData"
        :config="tableConfig"
        empty-text="暫無(wú)數(shù)據(jù)">
        <template v-for="(item, index) in tableConfig">
          <!-- 自定義類型 -->
          <el-table-column
            v-if="item.type === 'slot'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <slot :name="item.prop" :scope="scope"></slot>
            </template>
          </el-table-column>

          <!-- 狀態(tài)類型 -->
          <el-table-column
            v-if="item.type === 'status'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <span v-if="item.callback(scope).color === 'blue'" class="status-label label-blue">{{ item.callback(scope).text }}</span>
              <span v-if="item.callback(scope).color === 'red'" class="status-label label-red">{{ item.callback(scope).text }}</span>
              <span v-if="!item.callback(scope).color">{{ item.callback(scope).text }}</span>
            </template>
          </el-table-column>

          <!-- 操作類型 -->
          <el-table-column
            v-if="item.type === 'operate'"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable">
            <template slot-scope="scope">
              <template v-for="(operateItem, operateIndex) in item.operateList(scope)">
                <span
                  v-if="operateItem.show === undefined || operateItem"
                  :key="operateIndex"
                  @click="operateItem.callback(scope)"
                  :class="['operate-button', operateItem.color === 'red' ? 'operate-red' : '']">{{ operateItem.text }}</span>
              </template>
            </template>
          </el-table-column>

          <!-- 默認(rèn)類型 -->
          <el-table-column
            v-if="!item.type"
            :key="index+index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :sortable="item.sortable"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>

        </template>

      </el-table>

      <!-- 分頁(yè) -->
      <el-pagination
        v-if="pageConfig"
        class="table-page"
        @size-change="pageConfig.sizeChange"
        @current-change="pageConfig.currentChange"
        :page-sizes="pageConfig.pageSizes"
        :layout="pageConfig.layout || 'total, prev, pager, next, sizes'"
        :page-size="pageConfig.pageSize"
        :current-page="pageConfig.currentPage"
        :total="pageConfig.total">
      </el-pagination>
    </div>
  </template>
  
  <script>
    export default {
      props: {
        tableConfig: {
          type: Array,
          default: () => []
        },
        tableData: {
          type: Array,
          default: () => []
        },
        pageConfig: {
          type: Object,
          default: () => {}
        },
        stripe: {
          type: Boolean,
        },
        height: {
          type: String,
        },
      },
      data () {
        return {}
      },
      mounted() {
      },
      methods: {
      }
    }
  </script>
  
  <style lang="scss">
    .operate-button {
      display: inline-block;
      margin-right: 5px;
      color: #09f;
      &:hover {
        cursor: pointer;
      }
    }
    .operate-red {
      color: #f00;
    }
    .status-label {
      display: inline-block;
      width: 60px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 5px;
    }
    .label-blue {
      background: rgba(164, 205, 245, 0.5);
      color: #0888de;
      border: 1px solid #0888de;
    }
    .label-red {
      background: rgb(240 141 181 / 50%);
      color: #de083a;
      border: 1px solid #de083a;
    }
  </style>
  

到了這里，關(guān)于基于vue和element-ui的表格組件，主推數(shù)據(jù)渲染，支持內(nèi)容和方法靈活綁定，提供動(dòng)態(tài)具名插槽自定義內(nèi)容的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！