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

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

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

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

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

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

table封裝路徑為根路徑下的 vue-qiankun/common/components/form/

form表單json配置生成器

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

• 2、本章節主要記錄自己的form表單封裝

• 3、封裝思路

  • A、根據布局,一行一列默認可不設置（columnSpan設置為24），一行兩列可設置參數columnSpan設置為12，后續以此類推

  • B、根據不同的字段類型，分別對應子組件進行渲染

  • C、子組件根據不同的類型，以及配置的類型字段進行渲染和數據綁定

  • D、子組件可以設置必填項和rules表單驗證規則

  • E、可以通過設置字段的值，去控制其他字段的展示和隱藏

  • F、下拉等字典類型數據，可統一設置讀取接口數據，也可以根據需要進行傳遞當前數組數據

  • G、圖片上傳可設置上傳接口，並可設置上傳多張圖片

  • H、富文本編輯器也可以作為組件嵌入表單

  • I、 ......

---

先來一個完整的效果展示

• 1、form表單配置json

  {
  "formListItem": [
    {
      "name": "name1",
      "type": "text",
      "title": "欄目標題",
      "required": true
    },
    {
      "name": "name",
      "type": "text",
      "title": "欄目名稱"
    },
    {
      "name": "total",
      "type": "number",
      "title": "欄目數量",
      "required": true
    },
    {
      "name": "count",
      "type": "number",
      "title": "瀏覽數量"
    },
    {
      "name": "descript",
      "type": "textarea",
      "title": "備注",
      "required": true,
      "rows": 3
    },
    {
      "name": "content",
      "type": "textarea",
      "title": "內容",
      "rows": 3
    },
    {
      "name": "startDate",
      "type": "date",
      "title": "開始日期",
      "required": true
    },
    {
      "name": "endDate",
      "type": "date",
      "title": "結束日期"
    },
    {
      "name": "isValid",
      "type": "switch",
      "title": "是否有效"
    },
    {
      "name": "isExpired",
      "type": "switch",
      "title": "是否過期",
      "required": true
    },
    {
      "name": "type",
      "type": "radio",
      "dictionary": [
        {
          "code": 1,
          "name": "橫版欄目"
        },
        {
          "code": 2,
          "name": "豎版欄目"
        }
      ],
      "title": "欄目類型",
      "controls": [
        {
          "value": 1,
          "showCondition": [
            {
              "name": "show",
              "type": "radio",
              "dictionary": [
                {
                  "code": 1,
                  "name": "China"
                },
                {
                  "code": 2,
                  "name": "English"
                }
              ],
              "title": "測試類型",
              "required": true
            },
            {
              "name": "image1",
              "type": "ImageTypeView",
              "title": "文件"
            }
          ]
        },
        {
          "value": 2,
          "showCondition": [
            {
              "name": "isValids",
              "type": "switch",
              "title": "是否有效"
            }
          ]
        }
      ]
    },
    {
      "name": "requireType",
      "type": "radio",
      "dictionary": [
        {
          "code": 1,
          "name": "類型一"
        },
        {
          "code": 2,
          "name": "類型二"
        }
      ],
      "title": "圖文類型",
      "required": true
    },
    {
      "name": "range",
      "type": "checkbox",
      "title": "發布范圍",
      "dictionary": [
        {
          "code": 1,
          "name": "范圍一"
        },
        {
          "code": 2,
          "name": "范圍二"
        }
      ],
      "required": true
    },
    {
      "name": "dateRange",
      "type": "daterange",
      "title": "日期范圍"
    },
    {
      "name": "creType",
      "type": "select",
      "dictionary": [
        {
          "code": 1,
          "name": "身份證"
        },
        {
          "code": 2,
          "name": "居住證"
        }
      ],
      "title": "證件類型"
    },
    {
      "name": "image",
      "type": "image",
      "title": "頭像"
    }
  ],
  "formData": {
    "name": "主菜單欄目",
    "total": null,
    "count": null,
    "createDate": 1606730360386,
    "type": 1,
    "creType": "",
    "range": [],
    "isExpired": false,
    "isValid": true
  }
}

• 2、 最后的效果圖片

效果展示的在線預覽頁面為 http://vue.tuokecat.com/#/webpack-app/form

具體代碼可根據路由進行搜索

字段配置詳細介紹

1、靜態文本 static

```javascript
  {
    type: "static",  // 字段類型只讀文本
    name: "name",   //與后台對接字段
    title: "名稱",  // 前端展示字段
  },
```

2、文本框 text

```javascript
  {
    type: "text",  // 字段類型文本框
    name: "name",  //與后台對接字段
    title: "域名",  // 前端展示字段
    required: true, // 必填項設置
    maxlength: 50,  // 字符串長度限制
    showwordlimit： true, // 是否顯示字符串長度
    placeholder："請輸入10個字符以內的名稱", // 占位文本提示
    append: ".com",  // 文本框后置內容
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```

3、文本域 textarea

```javascript
  {
    type: "textarea",  // 字段類型文本域
    name: "name",  //與后台對接字段
    title: "備注",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請輸入10個字符以內的名稱", // 占位文本提示
    rows: 4, //  輸入框行數
    minlength: 100, // 最小輸入長度
    maxlength: 5000,  // 最大輸入長度
    showwordlimit： true, // 是否顯示字符串長度
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```

4、下拉框 select

```javascript
  {
    type: "select",  // 字段類型下拉框
    name: "options",   //與后台對接字段
    title: "類型",  // 前端展示字段
    required: true, // 必填項設置
    placeholder:"請選擇類型",  // 占位文本提示
    // dictionary  可直接傳遞下拉數據，也可以傳遞字典中的typeCode,通過內部接口獲取
    dictionary: 7010, // 7010為字典中維護的typecode
    dictionary:[
      {
        code: 1, name:"圖片",
      },
      {
        code: 2, name:"視頻"
      }
    ],
    multiple: true, // 下拉列表可以多選
    // rules // 正則匹配
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '只能選擇*******' }
    ],
    // 點擊下來觸發切換聯動的事件，為一個函數
    changeFunction: function(){}
  },
```

5、富文本 editor

```javascript
  {
    type: "editor",  // 字段類型富文本
    name: "content",   //與后台對接字段
    title: "內容",  // 前端展示字段
    required: true, // 必填項設置
    placeholder:"請選擇類型",  // 占位文本提示
    // rules // 正則匹配
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '只能選擇*******' }
    ],
    maxLength:5000, // 富文本框最大長度，默認5000
  },
```

6、數值框 number

```javascript
  {
    type: "number",  // 字段類型數值
    name: "num",  //與后台對接字段
    title: "總數",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請輸入10個字符以內的名稱", // 占位文本提示
    precision: 2,  // 小數點后的位數
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```

7、省市區三級級聯選擇 citySelect

```javascript
  {
    type: "citySelect",  // 字段類型省市區
    name: "region",  //與后台對接字段
    title: "戶籍地",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請輸入10個字符以內的名稱", // 占位文本提示
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```   

8、 圖片上傳 image

```javascript
  {
    type: "image",  // 字段類型圖片
    name: "images",  //與后台對接字段
    title: "上傳圖片",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請上傳圖片", // 占位文本提示
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```      

9、 視頻上傳 video

```javascript
  {
    type: "video",  // 字段類型視頻
    name: "images",  //與后台對接字段
    title: "上傳視頻",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請上傳視頻", // 占位文本提示
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```      

10、 日期 date

```javascript
  {
    type: "date",  // 字段類型日期
    name: "date",  //與后台對接字段
    title: "日期",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請選擇日期", // 占位文本提示
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```      

11、 日期范圍 daterange

```javascript
  {
    type: "daterange",  // 字段類型日期
    name: "date",  //與后台對接字段
    title: "日期范圍",  // 前端展示字段
    required: true, // 必填項設置
    placeholder："請選擇日期", // 占位文本提示
    // rules // 數組
    rules: [
      { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入數字最多兩位小數' }
    ],
  },
```  

附上整個調用的所有代碼

• 1、template 模板代碼

  <template>
    <div>
      <sl-table
        :list="list"
        @handleSelectionChange="handleSelectionChange"
        :columns="columns"
        :operates="operates"
        v-model:pageModel="pageModel"
        @search="search"
      >
      </sl-table>
    </div>
  </template>

• 2、'script'標簽代碼

import SlTable from '../../../common/components/table/index.vue'
import { defineComponent, reactive, toRefs } from "vue";
import { list_test, columns_test } from "./tableConfig";
export default defineComponent({
components: { SlTable },
setup() {
  // 選中行
  const handleSelectionChange = (val) => {
    console.log("handleSelectionChange-val:", val);
  };
  // 編輯
  const handleDetail = (index, row, idx) => {
    console.log("index:", index, idx);
    console.log("row:", row);
  };
  // 刪除
  const handleDel = (index, row) => {
    console.log(" index:", index);
    console.log(" row:", row);
  };

  const state = reactive({
    pageModel: {
      page: 1,
      limit: 10,
      total: 17
    },
    list: [], // table數據
    columns: [], // 需要展示的列
    operates: {
      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);
          }
        }
      ]
    } // 列操作按鈕
  });

  state.list = list_test;
  state.columns = columns_test;
  const search = () => {
    state.list = [...state.list];
    console.log(state.pageModel, "state.pageModel");
  };
  return {
    ...toRefs(state),
    handleSelectionChange,
    search
  };
}
});

• 3、其中模擬數據和字段配置在單獨的文件中tableConfig

    const list_test =
[
  {
      id: "24",
      title: "編號3",
      state: 0,
      createTime:"2021-09-23T17:57:09",
      remark: "自定義"
  },
  {
      id: "23",
      title: "編號4",
      state: 1,
      createTime:"2021-09-23T17:57:19",
      remark: "自定義"
  },
  {
      id: "23",
      title: "編號5",
      state: 2,
      createTime:"2021-09-23T17:57:29",
      remark: "自定義"
  },
  {
     id: "23",
     title: "編號5",
     state: 1,
     createTime:"2021-09-23T17:57:39",
     remark: "自定義111"
  },
  {
      id: "223",
      title: "編號3",
      state: 1,
      createTime:"2021-09-23T17:57:49",
      remark: "22222"
  },
  {
      id: "2444",
      title: "編號3",
      state: 0,
      createTime:"2021-09-23T17:57:59",
      remark: "333333"
  },
  {
    id: "24",
    title: "編號3",
    state: 0,
    createTime:"2021-09-23T17:57:09",
    remark: "自定義"
},
{
    id: "23",
    title: "編號4",
    state: 1,
    createTime:"2021-09-23T17:57:19",
    remark: "自定義"
},
{
    id: "23",
    title: "編號5",
    state: 2,
    createTime:"2021-09-23T17:57:29",
    remark: "自定義"
},
{
   id: "23",
   title: "編號5",
   state: 1,
   createTime:"2021-09-23T17:57:39",
   remark: "自定義111"
},
{
    id: "223",
    title: "編號3",
    state: 1,
    createTime:"2021-09-23T17:57:49",
    remark: "22222"
},
{
    id: "2444",
    title: "編號3",
    state: 0,
    createTime:"2021-09-23T17:57:59",
    remark: "333333"
}
]

const columns_test = [
  {
      type:'checkbox',
  },
  {
    prop: "id",
    label: "編號",
    type:'index',
    align: "center"
  },
  {
    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>`:`未定義`
    }
  }
]
export {
  list_test,
  columns_test
}

最后的最后

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

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