自定义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" 两个属性变量，就可以控制不出现移除标签人员和选择按钮的出现了。

以上就是自定义用户组件的主要逻辑和处理操作，我们自定义用户组件后，在各个页面需要的地方，引入使用即可，可以非常方便的重用，且可以减少单一页面的代码，非常方便。

学会如何自定义用户组件的处理过程，是我们前端开发所必须掌握的基本技能之一，熟练拆分各种重复模块变为自定义组件的过程，可以使得我们的代码更方便维护开发，增强可读性。