封裝Vue Element的form表單元件

在上述示例中，currenttabcomponent可以包括：

就醬，對它的介紹完了。

接下來就是封裝的具體實現，照例先來張效果圖：

1、封裝的form表單元件form.vue：

重置

查詢

在封裝的時候發現乙個問題，就是有時候可能一行展示兩列表單，有時候呢可能一行又要展示三列或四列表單，這樣的話，也是需要在封裝的時候去實現可配置的效果的，那麼本次封裝就順便封裝了乙個類似lodash的_.chunk的工具來實現分段展示。

lodash對_.chunk的定義：將陣列array拆分成多個size長度的區塊，並將這些區塊組成乙個新陣列。如果array無法被分割成全部等長的區塊，那麼最後剩餘的元素將組成乙個區塊。

其實lodash這個工具庫就像它官網介紹的那樣，確實很實用，但需要經常使用才可以掌握它所包含的工具，否則，也是百臉懵逼。不過它的很多任務具從字面意思來看，也不難理解其代表的意思。

自己封裝的分段chunk.js

export const chunk = (array, size) => 
result[rowsize].push(item);
})return result;
}

另外，在封裝時有乙個object.fromentries的方法不相容ie，比如這裡我本來寫的是：

const attrs = object.fromentries(object.entries(item).filter(n => !/^(prop|is|rules)/.test(n[0])))

但我們公司又要求專案可以相容ie(我們公司的ie基本都是ie11)，所以只能自己封裝了乙個fromentries方法來代替object.fromentries。

export const fromentries = arr => ;
for (const key of arr.keys()) 
return result;
} if(array.isarray(arr))
arr.map(([key,value]) => )
return result
} throw 'uncaught typeerror: argument is not iterable';
}

2、使用已封裝的表單元件：

本次封裝的form表單元件，基本考慮到了在日常開發中會經常使用到的表單元件，如果還有其他的需求，可自行新增。另外，本次封裝也對表單的回顯(返顯)做了實現，比如我們在編輯資料時，需要將被修改的資料顯示在表單中，本次封裝就充分考慮到了這一點，只要你在傳給封裝的form元件的引數中加乙個data引數，並將需要回顯的資料名稱一一對應並賦值就可以了。回顯的時候有乙個問題需要注意：如果需要回顯的表單元件是在乙個頁面中而非巢狀在彈窗元件中，那麼需要將回顯的方法寫在頁面的created生命週期函式中，比如：

created();
this.config.data = data;
},

為什麼要這麼做呢？為什麼不寫在mounted生命週期函式中呢？這就涉及到父子元件的生命週期函式的載入順序的問題了。為什麼要考慮父子元件的生命週期函式的載入順序呢？是因為考慮到所封裝的表單元件的通用性原則，我把重置表單元件的方法寫在了所封裝的表單元件的mounted生命週期函式中了，而由於父子元件的生命週期函式的載入順序為：

父beforecreate->父created->父beforemount->子beforecreate->子created->子beforemount->子mounted->父mounted

因此如果把回顯的方法放在父元件的mounted週期函式中，那麼經過form子元件的先一步重置會使得無法正常回顯出資料。如果form元件是巢狀在了彈窗元件中，那麼是把回顯的方法寫在了彈出彈窗元件的方法中，就沒有這個問題。

-------------------------------- 2023年12月10日更新 --------------------------------

結合自身在開發中遇到的實際需求，需要讓一行展示表單的個數自適應，如：瀏覽器視窗足夠大時，一行展示四列表單，當瀏覽器視窗小於一定的寬度時，一行展示三列表單，當瀏覽器視窗再小於一定的寬度時，比如小於750px時，一行就展示一列表單。那麼之前封裝的表單元件中使用到的分段展示已經不能實現這樣的場景了，但是我又想在彈窗中只展示一列表單，所以這樣的form元件該如何封裝呢？

一開始，我也想到的是在原來分段展示的**的基礎上新增if else來實現，但轉念一想，這樣的封裝方式很不優雅啊。於是就想到了element的layout布局中的響應式布局，這種布局方法就能很好的實現我們的場景，而且可以充分利用element的layout布局來實現前文的分段展示，我們也就不需要自己再去寫分段的js**了。

1、重新封裝的form元件完整**如下：

重置

查詢

從以上**可以看出，跟上文的實現過程大同小異，不同之處在於：

在標籤el-col上，我將:span="24 / rowsize"換成了v-bind="attrs"，這個v-bind="attrs"就是玄機，就是用來設定自適應布局的，在computed計算屬性中，我對attrs進行了賦值並給了乙個預設值，請看**：

attrs() =  this.config || {};
return attrs
}

由於乙個公司，同乙個專案中，關於列表查詢項需要展示出來的表單形式一般都是固定的，比如一行展示四列，縮小到一定寬度後，一行展示三列等等，其他所有頁面基本都是這種形式，不會說這個頁面一行五列，那個頁面又一行三列，除非那個頁面的查詢項就只有三列，否則基本都是統一的。所以你在封裝元件時，按照你們的需求給attrs設定乙個預設值就可以了。

2、使用方法：

在使用方法中，在定義的config中有乙個attrs屬性，這個就是傳給子元件的用來控制一行展示幾列表單的關鍵，這裡充分利用了element的layout布局方式，你可以根據自己的實際需求，隨意搭配，很是靈活呢！比如在彈窗中只需展示一列表單，那麼你就可以給子元件傳如下的引數即可：

attrs:

多說一句，你是想用上文那種可分段展示的表單元件呢，還是想用這種自適應布局的表單元件呢，那就根據你們的實際需求來定吧，反正都能用，又不是不能用，我只是給你你提供了多一種選擇和實現方式，但還是建議用這種方式吧，也省的自己寫分段的**了。

封裝Vue Element的form表單元件

vue element分頁器元件封裝

vue element分頁元件封裝成公共元件

iOS中NSPredicate常用的format

封裝Vue Element的form表單元件

vue element分頁器元件封裝

vue element分頁元件封裝成公共元件

iOS中NSPredicate常用的format

相關推薦