在我們很多前端業務開發中，往往為了方便，都需要自定義一些使用者元件，一個是減少單一頁面的程式碼，提高維護效率；二個也是方便重用。本篇隨筆介紹在任務管理操作中，使用自定義Vue&Element元件，實現系統使用者選擇和顯示。
1、系統使用者的選擇需求
在我們一些業務系統中，可能需要選中系統使用者進行一些業務處理，如本篇介紹的任務系統中，如在新增或者編輯介面中，需要選擇任務的執行人、參與人等人員操作。
而在檢視詳細資料的時候，可能需要展示相關的人員名稱，如下介面所示。
前者需要彈出介面中選擇使用者，可以設定多選、單選、過濾使用者資料的操作；後者則需要根據使用者的ID顯示正常的名稱。
一般來說，我們使用者隸屬於某個部門、角色、或者崗位的，我們可以根據這些條件進行開始展示，同時也可以輸入一定的條件進行查詢定位使用者。
選擇使用者的彈出介面如下所示，其中可以根據部門分類、崗位分類進行快速的查詢，同時也可以根據使用者名稱進行查詢。
我們可以通過定義使用者元件，允許開啟/禁用限制使用者多選的操作，如果選擇多個，則自動新增在列表中，如下介面所示。
確認後，介面的人員進行更新顯示即可。
以上就是大概的使用者元件的介面效果和邏輯處理。
2、實現使用者選擇和顯示的元件開發
我們先定義一個使用者元件，命名為selectPostUser.vue其中HTML模板程式碼的結構如下所示。
主要就是一個標籤顯示、按鈕、和一個彈出對話方塊。
在編輯狀態下，顯示按鈕，並可以觸發彈出對話方塊的展示，對話方塊主要就是顯示系統系統的內容。
而這個元件，我們定義了幾個prop屬性，用來配置顯示不同的介面效果，是否可以選擇，是否可以移除標籤、是否可以多選人員等設定。
export default {
props: {
value: {// 接受外部v-model傳入的值
type: [String],
default: ''
},
closable: {// 是否可以關閉標籤
type: Boolean,
default: () => { return true }
},
selectable: {// 是否可選人員
type: Boolean,
default: () => { return true }
},
multiple: { // 是否多選,預設可以多選
type: Boolean,
default: true
}
},
我們定義了幾個data變數，以及對幾個變數進行watch監控，以便控制它的值的更新和返回，如下程式碼所示。
這裡注意，如果我們需要使用.sync的方式來更新屬性的值，那麼需要使用update:value的格式進行處理，如下所示。
則程式碼更新這個visible則如下
this.$emit('update:isVisible', val)
而如果我們這個元件通過v-modal繫結的值，如下介面程式碼所示
<select-post-user v-if="isEdit" ref="editForm.participant" v-model="editForm.participant" />
如果更新返回，則使用下面方式
this.$emit('input', val)
使用自定義的使用者元件，需要在父頁面中引入相關的物件元件，如下程式碼所示。
import selectPostUser from './components/selectPostUser'
然後加入父頁面的元件列表中
import selectPostUser from './components/selectPostUser'
import tasklog from './components/tasklog' let that;
export default {
components: { selectPostUser, tasklog }, // 匯入元件
這樣我們才能在介面上正常使用了
<el-col :span="12">
<el-form-item label="執行人" prop="executor">
<select-post-user ref="add_executor" v-model="addForm.executor" :multiple="false" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="參與人" prop="participant">
<select-post-user ref="add_participant" v-model="addForm.participant" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="驗收人" prop="accepter">
<select-post-user ref="add_accepter" v-model="addForm.accepter" />
</el-form-item>
</el-col>
如果我們需要在限制不能多加超過一個使用者的，那麼設定 :multiple="false" 即可限制即可，
使用者元件中對該變數進行處理，限制新增多於一個人員的情況即可。
通過，選擇確認內容後，我們更新對應的值，並觸發一個change事件給父頁面使用即可。
async handleSubmit () { // 表單提交
this.isVisible = false
this.change() // 觸發值變化
this.$emit('submit', this.tags)
},
change (data) {
if (this.tags) {
this.dataValue = this.tags.map(e => e.id).join(',')
console.log(this.dataValue)
this.$emit('change', this.dataValue)
}
},
以上就是自定義使用者元件的主要邏輯和處理操作，我們自定義使用者元件後，在各個頁面需要的地方，引入使用即可，可以非常方便的重用，且可以減少單一頁面的程式碼，非常方便。
學會如何自定義使用者元件的處理過程，是我們前端開發所必須掌握的基本技能之一，熟練拆分各種重複模組變為自定義元件的過程，可以使得我們的程式碼更方便維護開發，增強可讀性。