封裝Vue Element的form表單元件
阿新 • • 發佈:2020-08-21
前兩天封裝了一個基於vue和Element的table表格元件,閱讀的人還是很多的,看來大家都是很認同元件化、高複用這種開發模式的,畢竟開發效率高,程式碼優雅,逼格高嘛。雖然這兩天我的心情很糟糕,就像“懂王”懟記者:“你是一個糟糕的記者;CNN,Fake news”一樣的心情,但我還是忍著難受的心情來工作和分享,畢竟工作是飯碗,分享也能化解我糟糕透頂的心情。
今天,就來分享一下基於vue和Element所封裝的form表單元件,其中所用到的技術,在上一篇文章封裝Vue Element的table表格元件中已介紹的差不多了,今天再來多講一個vue的動態元件component。關於動態元件component的介紹,vue官方倒是很吝嗇,就只是給了一個例子來告訴我們如何使用而已。我們可以把它理解成一個佔位符,其具體展示什麼,是由`is`attribute來實現的,比如官網給的例子:
```html
```
在上述示例中,currentTabComponent可以包括:
* 已註冊元件的名字
* 或一個元件的選項物件
就醬,對它的介紹完了。
如果你還想了解更多,可以去vue官網檢視。
接下來就是封裝的具體實現,照例先來張效果圖:
![](https://img2020.cnblogs.com/blog/688074/202008/688074-20200821141055521-855437865.png)
1、封裝的form表單元件Form.vue:
```html
重置
查詢
```
在封裝時有一個Object.fromEntries的方法不相容ie,而我們公司又要求專案可以相容ie(我們公司的ie基本都是ie11),所以只能自己封裝了一個fromEntries方法。
```js
export const fromEntries = arr => {
if (Object.prototype.toString.call(arr) === '[object Map]') {
console.log(1)
let result = {};
for (const key of arr.keys()) {
result[key] = arr.get(key);
}
return result;
}
if(Array.isArray(arr)){
let result = {}
arr.map(([key,value]) => {
result[key] = value
})
return result
}
throw 'Uncaught TypeError: argument is not iterable';
}
```
2、使用已封裝的表單元件:
```html
```
本次封裝的form表單元件,基本考慮到了在日常開發中會經常使用到的表單元件,如果還有其他的需求,可自行新增。另外,本次封裝也對錶單的回顯(返顯)做了實現,比如我們在編輯資料時,需要將被修改的資料顯示在表單中,本次封裝就充分考慮到了這一點,只要你在傳給封裝的form元件的引數中加一個data引數,並將需要回顯的資料名稱一一對應並賦值就可以了,比如:
```js
data: {
name: '小壞',
certificateId: '222',
status: '0',
love: ['0']
}
```
如果你不需要回顯資料,比如新增的時候,那就不傳這個data就可以了。