前端提升生產力系列二（vue3 element-plus 配置json快速生成table列表組件）

⚠️本文為博客園首發文章，未獲授權禁止轉載

大家好，我是aehyok🎋，一個住在深圳城市的佛系碼農🧚🏻‍♀️，如果你喜歡我的文章📚，可以通過點贊幫我聚集靈力⭐️。

個人github倉庫地址： https:github.com/aehyok

本文講解代碼倉庫地址 ： https:github.com/aehyok/vue-qiankun 目前基於dev分支進行開發和測試

本demo已部署騰訊雲 http://vue.tuokecat.com（服務器配置較低，如有訪問比較慢，請耐心等待）

table列表json配置生成器

• 1、 在PC端日常的使用中，使用最多的過於表單和列表了，故此對table列表和form表單進行了統一的封裝，通過json配置就可以快速適配table列表和form表單。

• 2、封裝思路

  • A、列表的搜索條件和搜索按鈕，這個與table 可以解耦，目前放到單獨的組件中，所以本節暫不考慮
  • B、table列表顯示字段，根據不同的類型進行制定
  • C、最右側的操作按鈕的配置，比如（行編輯、刪除等操作），根據定義的函數進行注入，后面實現函數操作進行自定義，不與table列表沖突
  • D、特殊的字段，比如（序號字段、多選框、單選框等等）
  • E、最后當然少不了分頁器的參與

• 3、本章節主要記錄自己的table封裝

---

先來一個完整的效果展示

• 1、列表展示字段的配置json

  {
    type:'checkbox',
  },
  {
    type:'index',
  },
  {
    prop: "title",
    label: "標題",
    align: "center",
  },
  {
    prop: "createTime",
    label: "創建時間",
    align: "center",
    dateFormat: "yyyy-MM-dd HH:mm:ss",
    sortable: true
  },
  {
    prop: "state",
    label: "狀態",
    align: "center",
    dictionary: [
      { code: 0, name: "待審核"},
      { code: 1, name: "已審核"},
      { code: 2, name: "審核中"},
    ]
  },
  {
    prop:"custom",
    label:"自定義",
    align: "center",
    html: (row, column) => {
      return row.title==="編號3" ? `<span style="color: red;">${ row.remark }</span>`:`未定義`
    }
  }

最后一個字段 custom 可以通過配置html，自定義展示復雜的組件和樣式介入

• 2、右側操作按鈕的配置信息

{
   width: 200,
   fixed: "right",
   list: [
     {
       id: "1",
       label: "查看",
       type: "text",
       show: true,
       disabled: false,
       method: (index, row, ss) => {
         handleDetail(index, row, ss);
       }
     },
     {
       id: "2",
       label: "刪除",
       type: "text",
       show: true,
       disabled: false,
       method: (index, row) => {
         handleDel(index, row);
       }
     }
   ]
 } 

其中的handleDetail和handleDel函數通過自定義實現業務對接即可。

• 3、 最后的效果圖片

字段配置詳細介紹

1、普通字段直接配置

```javascript
  {
    prop: "name",
    label: "設施名稱",
    align: "center",
  }
```

2、序號字段配置（后期可直接配置自定義序號，暫時從 1 自增+1）

```javascript
  {
    type: "index"
  }
```

3、checkbox 字段配置（后期可添加單選框的配置）

```javascript
  {
    type: "checkbox"
  }
```

4、日期格式字段配置，可設置轉換格式

```javascript
{
    prop: "recorDate",
    label: "返鄉日期",
    align: "center",
    dateFormat: "yyyy-MM-dd"
},
```

5、字典數據轉換

```javascript
{
    prop: "sex",
    label: "性別",
    align: "center",
    dictionary:[
        {
            code: 1, name:'男',
        },
        {
            code: 2, name:'女',
        }
    ]
},
```

6、自定義字段展示內容

```javascript
  {
    prop: "",
    label: "自定義",
    align: "center",
    html: (row, column) => {
        return row.name==="集資球場" || row.address ==="22" ? `<span style="color: red;">${ row.address }</span>`:`222`
    }
 },
```

7、顯示 image

```javascript
  {
    prop: "image",
    label: "自定義",
    align: "center",
    image:'image'
 },
```

8、設置字段排序(前端自動排序）

```javascript
  {
    prop: "image",
    label: "自定義",
    align: "center",
    sortable: true
 },
```

9、設置字段自定義調用接口排序

```javascript
  {
    prop: "image",
    label: "自定義",
    align: "center",
    sortable: "custom",  // 通過傳遞的search查詢函數中添加了orders排序字段
 }
```

10、其他字段待補充

......

最后的最后

https://github.com/aehyok/vue-qiankun
本文中不涉及到封裝的組件代碼，有關代碼問題可以訪問文章開頭的微前端github demo 倉庫，github倉庫將會保持持續更新，不斷優化小demo。

https://github.com/aehyok/2021
最后自己每天工作中的筆記記錄倉庫，主要以文章鏈接和問題處理方案為主。