??本文為博客園社區首發文章，未獲授權禁止轉載
大家好，我是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
最后自己每天作業中的筆記記錄倉庫，主要以文章鏈接和問題處理方案為主，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330052.html
標籤：其他