自定義Vue&Element組件，實現用戶選擇和顯示

在我們很多前端業務開發中，往往為了方便，都需要自定義一些用戶組件，一個是減少單一頁面的代碼，提高維護效率；二個也是方便重用。本篇隨筆介紹在任務管理操作中，使用自定義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)
      }
    },

 

如果我們是查看明細狀態下，不允許用戶編輯或者修改人員，那麼可以通過修改其他兩個屬性進行控制顯示，如下代碼所示。

<el-col :span="12">
  <el-form-item label="執行人">
    <select-post-user ref="viewForm.executor" v-model="viewForm.executor" :closable="false"
      :selectable="false" />
  </el-form-item>
</el-col>
<el-col :span="12">
  <el-form-item label="參與人">
    <select-post-user ref="viewForm.participant" v-model="viewForm.participant" :closable="false"
      :selectable="false" />
  </el-form-item>
</el-col>
<el-col :span="12">
  <el-form-item label="驗收人">
    <select-post-user ref="viewForm.accepter" v-model="viewForm.accepter" :closable="false"
      :selectable="false" />
  </el-form-item>
</el-col>

通過設置 :closable=”false”和  :selectable=”false” 兩個屬性變量，就可以控制不出現移除標籤人員和選擇按鈕的出現了。

以上就是自定義用戶組件的主要邏輯和處理操作，我們自定義用戶組件後，在各個頁面需要的地方，引入使用即可，可以非常方便的重用，且可以減少單一頁面的代碼，非常方便。

學會如何自定義用戶組件的處理過程，是我們前端開發所必須掌握的基本技能之一，熟練拆分各種重複模塊變為自定義組件的過程，可以使得我們的代碼更方便維護開發，增強可讀性。

 

Tags:

VirMach 便宜 VPS

QNews

QNews