vue3 element-plus 配置json快速生成table列表元件，提升生產力近500%（已在公司使用，持續優化中）

aehyok發表於2021-10-15
VueJSON元件優化

⚠️本文為部落格園首發文章，未獲授權禁止轉載

大家好，我是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、 最後的效果圖片

微信截圖_20211013150541.png

欄位配置詳細介紹

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
最後自己每天工作中的筆記記錄倉庫，主要以文章連結和問題處理方案為主。

相關文章