elementPlus表格二次封裝過程

更新時間：2024年07月09日 15:17:35 作者：不露聲色丶

我們正常在開發(fā)項目中,表格的風格是一致的,但是表格或多或少會有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對時間進行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下

為何要對element-plus表格進行二次封裝？

我們正常在開發(fā)項目中，表格的風格是一致的，但是表格或多或少會有些不同，有些是需要分頁，有些是按鈕功能不同，有些又需要加Tag，或者對時間進行格式化等。所有才有了對element-plus的二次封裝。

優(yōu)勢

組件中集成表格、分頁、loading、tag等功能。
統(tǒng)一項目表格整體風格。
快速將表格在分頁與不分頁間切換。
表格列可根據(jù)需求進行定制化。
可快速開發(fā)大量自定義表格。

例子

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  @current-change="onCurrentTableChange"
>
  <template #operate="{ scope }">
    <el-button size="small" @click="handleEdit(scope)">Edit</el-button>
    <el-button size="small" type="danger" @click="handleDelete(scope)"
      >Delete</el-button
    >
  </template>
</ELTable>

參數(shù)

tableData 表格的數(shù)據(jù)

{
   tableData: any[];
}

columns 列配置

type TableColumnType = {
    prop: string;
    label: string;
    attrs?: any;
    slot?: boolean;
    tagList?: TagObjectType[];
};
{
    columns: TableColumnType[];
};

pageConfig 頁面配置

type PageConfigType = {
  pageSize: number,
  total: number,
  pagerCount?: number,
  currentPage: number,
  // eslint-disable-next-line no-unused-vars
  handleCurrentChange: (val: number) => void
};
{
  pageConfig: PageConfigType;
}

currentChange 點擊分頁后的事件

 {
   currentPageChange: (val: number,oldVal: number) => void;
 }

整體簡單配置

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  @current-change="onCurrentTableChange"
>
</ELTable>
const tableObject = reactive<TableType>({
  columns: [
    {
      prop: 'date',
      label: 'Date',
      attrs: {
        width: 140
      }
    },
    {
      prop: 'alarm',
      label: '告警等級',
      attrs: {
        width: 100
      }
    }
  ],
  pageConfig: {
    pageSize: 5,
    total: 100,
    pagerCount: 5,
    currentPage: 3,
    handleCurrentChange: (number: number) => {
      console.log('重新請求數(shù)據(jù)', number);
    }
  },
  tableData: [
    {
      date: '2016-05-03',
      alarm: '1'
    },
    {
      date: '2016-05-02',
      alarm: '4'
    }
  ]
});

簡單的例子

帶分頁表格

usePagination 添加 usePaginnation后即可實現(xiàn)表格分頁的功能，@current-change是當分頁頁面變化時的回調

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  usePagination
>
</ELTable>
const tableObject = reactive<TableType>({
  columns: [],
  pageConfig: {
    pageSize: 5,
    total: 100,
    pagerCount: 5,
    currentPage: 3,
    // 當前頁發(fā)生變化時的回調
    handleCurrentChange: (number: number) => {
    tableObject.pageConfig.currentPage = number;
      console.log('重新請求當前頁的數(shù)據(jù)數(shù)據(jù)', number);
    }
  },
  tableData: []
});

不帶分頁的表格

不帶分頁的表格只需要將 usePagination 設置為false，pageConfig項可以不設置即可

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :usePagination="false"
>
</ELTable>
const tableObject = reactive<TableType>({
  columns: [],
  tableData: []
});

帶 tag 的表格

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
>
</ELTable>

需要在 columns 下配置 tagList

import ELTable, { TableType } from '@/components/Table.vue';
const tableObject = reactive<TableType>({
  columns: [
    {
      prop: 'date',
      label: 'Date',
      attrs: {
        width: 140
      }
    },
    {
      prop: 'name',
      label: 'Name',
      attrs: {
        width: 80
      }
    },
    {
      prop: 'address',
      label: 'Address',
      attrs: {
        width: 180
      }
    },
    {
      prop: 'alarm',
      label: '告警等級',
      attrs: {
        width: 100
      },
      tagList: [
        {
          label: '嚴重',
          value: '1',
          className: 'error'
        },
        {
          label: '緊急',
          value: '2',
          className: 'warning'
        },
        {
          label: '一般',
          value: '3',
          className: 'info'
        },
        {
          label: '提示',
          value: '4',
          className: 'success'
        }
      ]
    }
  ],
  pageConfig: {
    pageSize: 5,
    total: 100,
    pagerCount: 5,
    currentPage: 3,
    handleCurrentChange: (number: number) => {
      console.log('重新請求數(shù)據(jù)', number);
    }
  },
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '4'
    },
    {
      date: '2016-05-04',
      name: 'Tom44',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '3'
    },
    {
      date: '2016-05-01',
      name: 'Tom55',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    },
    {
      date: '2016-05-01',
      name: 'Tom55',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    }
  ]
});

帶按鈕的表格

帶按鈕的表格一般是需要自定義模板的。需要在 columns 下面的配置項中添加操作選項。然后插槽名則是 prop 的值。

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  @current-change="onCurrentTableChange"
>
  <template #operate="{ scope }">
    <el-button size="small" @click="handleEdit(scope)">Edit</el-button>
    <el-button size="small" type="danger" @click="handleDelete(scope)"
      >Delete</el-button
    >
  </template>
</ELTable>

import ELTable, { TableType } from '@/components/Table.vue';
const tableObject = reactive<TableType>({
  columns: [
    {
      prop: 'date',
      label: 'Date',
      attrs: {
        width: 140
      }
    },
    {
      prop: 'name',
      label: 'Name',
      attrs: {
        width: 80
      }
    },
    {
      prop: 'address',
      label: 'Address',
      attrs: {
        width: 180
      }
    },
    {
      prop: 'alarm',
      label: '告警等級',
      attrs: {
        width: 100
      },
      tagList: [
        {
          label: '嚴重',
          value: '1',
          className: 'error'
        },
        {
          label: '緊急',
          value: '2',
          className: 'warning'
        },
        {
          label: '一般',
          value: '3',
          className: 'info'
        },
        {
          label: '提示',
          value: '4',
          className: 'success'
        }
      ]
    },
    {
      prop: 'operate',
      label: '操作',
      slot: true,
      attrs: {
        width: '180'
      }
    }
  ],
  pageConfig: {
    pageSize: 5,
    total: 100,
    pagerCount: 5,
    currentPage: 3,
    handleCurrentChange: (number: number) => {
      console.log('重新請求數(shù)據(jù)', number);
    }
  },
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '4'
    },
    {
      date: '2016-05-04',
      name: 'Tom44',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '3'
    },
    {
      date: '2016-05-01',
      name: 'Tom55',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    },
    {
      date: '2016-05-01',
      name: 'Tom55',
      address: 'No. 189, Grove St, Los Angeles',
      alarm: '1'
    }
  ]
});

配置插槽

如果在columns中配置了 sort:true。默認就會讀取表格中插槽名稱為 props值的結構，放入當前列。

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  @current-change="onCurrentTableChange"
>
  <template #aaa="{ scope }">
    <el-button size="small" @click="handleEdit(scope)">Edit</el-button>
    <el-button size="small" type="danger" @click="handleDelete(scope)"
      >Delete</el-button
    >
  </template>
</ELTable>
<script>
import ELTable, { TableType } from '@/components/Table.vue';
const tableObject = reactive<TableType>({
  columns: [
    {
      prop: 'aaa',
      label: '操作',
      attrs: {
        width: '180'
      },
      slot: true // 屬性為true時 插槽生效，并讀取屬性名為 aaa 的插槽。
    },
  ],
});
</script>

配置表格列的原生屬性

如果想要配置表格列的原生屬性?？梢栽?code>clounms下的 attrs 中去配置，例如：想要配置 fixed 、resizable 、formatter 等…

import ELTable, { TableType } from '@/components/Table.vue';
const tableObject = reactive<TableType>({
  columns: [
    {
      prop: 'date',
      label: 'Date',
      attrs: {
      // 配置表格的原生屬性
        width: 140
        fixed: true,
        resizable: true
        formatter: function(row,column) {
          console.log('過濾器')
        }
      }
    },
  ],
});

當前項高亮時觸發(fā)的方法@selection-change

<ELTable
  class="table"
  :table-data="tableObject.tableData"
  :columns="tableObject.columns"
  :page-config="tableObject.pageConfig"
  @selection-change="onSelectionChange"
  highlight-current-row
  stripe
>
</ELTable>
const onSelectionChange = (row) => {
  console.log('選中當前項時會觸發(fā)的事件')
}

table表格封裝的源碼

<template>
    <div class="cus-table">
        <el-table v-loading="props.loading" :data="props.tableData" style="width: 100%" v-bind="$attrs">
            <el-table-column v-for="column in props.columns" :key="column.prop" :prop="column.prop" :label="column.label" width="180" v-bind="column?.attrs">
                <!-- 默認有插槽的情況 -->
                <template #default="scope">
                    <slot v-if="column.slot" :name="column.prop" :scope="scope" />
                    <!-- 當有告警時表格默認做出處理 -->
                    <template v-if="column.tagList?.length">
                        <div v-for="(tag, index) in filteredTagList(scope.row, column.tagList, column.prop)" :key="tag.value + '_' + index">
                            <div class="tag" :class="tag.className">{{ tag.label }}</div>
                        </div>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分頁 -->
        <template v-if="props.usePagination">
            <div class="pagination">
                <div>總共 {{ pageConfig.total }} 條信息</div>
                <el-pagination
                    v-model:current-page="currentPage"
                    class="cus-pagination"
                    background
                    layout="prev, pager, next"
                    :page-size="pageConfig.pageSize"
                    :total="pageConfig.total"
                    :pager-count="pageConfig.pagerCount"
                    @current-change="pageConfig.handleCurrentChange"
                />
            </div>
        </template>
    </div>
</template>
<script setup lang="ts">
type TagObjectType = {
    label: string;
    value: string;
    className: 'error' | 'warning' | 'info' | 'success' | 'offline';
};
type PageConfigType = {
    pageSize: number;
    total: number;
    pagerCount?: number;
    currentPage: number;
    // eslint-disable-next-line no-unused-vars
    handleCurrentChange?: (val: number) => void;
};
type TableColumnType = {
    prop: string;
    label: string;
    attrs?: any;
    slot?: boolean;
    tagList?: TagObjectType[];
};
export type TableType = {
    tableData: any[];
    columns: TableColumnType[];
    pageConfig?: PageConfigType;
    loading?: boolean;
    usePagination?: boolean;
};
const props = withDefaults(defineProps<TableType>(), {
    tableData: () => [],
    columns: () => [],
    pageConfig: () => ({
        pageSize: 5,
        total: 0,
        currentPage: 1,
    }),
    loading: false,
    usePagination: true,
});
const filteredTagList = (scope: any, tagList: any[], prop: string) => tagList?.filter((tag: any) => tag?.value === scope?.[prop]);
const currentPage = ref(props.pageConfig.currentPage);
</script>
<style lang="scss" scoped>
.error {
    background-color: rgba(171, 1, 0, 0.2);
    border: 2px solid rgba(255, 78, 77, 1);
}
.warning {
    background-color: rgba(185, 74, 0, 0.2);
    border: 2px solid rgba(255, 128, 15, 1);
}
.info {
    background-color: rgba(174, 127, 0, 0.2);
    border: 2px solid rgba(255, 235, 15, 1);
}
.tootip {
    background-color: rgba(0, 82, 183, 0.2);
    border: 2px solid rgba(61, 148, 255, 1);
}
.success {
    background-color: rgba(39, 191, 114, 0.2);
    border: 2px solid rgba(71, 221, 145, 1);
}
.offline {
    background-color: rgba(154, 158, 174, 0.2);
    border: 2px solid rgba(154, 158, 174, 1);
}
.cus-table {
    width: 100%;
    position: relative;
    overflow: hidden;
    .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 24px;
        color: #ffffff;
        opacity: 0.6;
        border-radius: 12px;
    }
    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.6);
    }
}
</style>

到此這篇關于elementPlus表格二次封裝的文章就介紹到這了,更多相關elementPlus表格封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3封裝數(shù)字滾動組件的實現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動組件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-08-08
vue3使用watch監(jiān)聽props的值的注意事項及說明
這篇文章主要介紹了vue3使用watch監(jiān)聽props的值的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-06-06
Vue源碼cached解析
最近在寫閉包的應用的時候，出現(xiàn)了一個cached函數(shù)，來源于Vue源碼，利用了閉包變量不會被回收的特點，可以緩存變量，cached本質上是一個高階函數(shù)，它接受一個函數(shù)的參數(shù)，同時返回一個函數(shù)
2022-08-08
vue3使用element-plus中el-table組件報錯關鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關于vue3使用element-plus中el-table組件報錯關鍵字'emitsOptions'與'insertBefore'的相關資料,文中將解決方法介紹的非常詳細,需要的朋友可以參考下
2022-10-10
Flutter部件內部狀態(tài)管理小結之實現(xiàn)Vue的v-model功能
本文是 Flutter 部件內部狀態(tài)管理的小結，從部件的基礎開始，到部件的狀態(tài)管理，并且在過程中實現(xiàn)一個類似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧
2019-06-06
vueJs函數(shù)toRaw?markRaw使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)toRaw?markRaw使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
Vue?ECharts實現(xiàn)機艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實現(xiàn)機艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下
2022-05-05
Vue中請求本地JSON文件并返回數(shù)據(jù)的方法實例
在前端開發(fā)過程當中,當后臺服務器開發(fā)數(shù)據(jù)還沒完善,沒法與咱們交接時,咱們習慣在本地寫上一個json文件做模擬數(shù)據(jù)測試代碼效果是否有問題,下面這篇文章主要給大家介紹了關于Vue中請求本地JSON文件并返回數(shù)據(jù)的相關資料,需要的朋友可以參考下
2022-08-08
Vue中fragment.js使用方法小結
這篇文章主要給大家匯總介紹了Vue中fragment.js使用方法的相關資料,需要的朋友可以參考下
2020-02-02
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-06-06