<template>
<div>
    <el-dialog
      title="请选择人员"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-select v-model="personName" multiple placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
    </el-dialog>
</div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
              dialogVisible: false,
              options: [],
              personName: [],
              personOptions:{
                resolve: null,
                reject: null
              }
            }
        },
        methods: {
         showDialog(options){
           this.options=options;
           return new Promise((resolve, reject) => {
             this.dialogVisible = true
            this.personOptions.resolve=resolve;
             this.personOptions.reject=reject
           })
         },
          confirm(){
            this.personOptions.resolve(this.personName)
            this.doClose()
          },
          cancel(){
            this.dialogVisible=false
          },
          clear () {
            this.options = [];
            this.personName=[];
            this.personOptions = {
              resolve: null,
              reject: null
            }
          },
          doClose () {
            this.dialogVisible = false
            this.clear()
          }
        }
    }
</script>

<style scoped lang="scss">

</style>

组件selectPersonDialog

<template>
  <div id="app">
    <router-view/>
    <select-person-dialog ref="selectPerson"></select-person-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import  selectPersonDialog from '@/components/selectPersonDialog'

export default {
  name: 'App',
  components: {
    selectPersonDialog
  },
  mounted () {
    Vue.prototype.$selectPerson = this.$refs.selectPerson
  }
}
</script>

在app.vue上面 引入selectPersonDialog组件，设置ref，挂载和设置全局方法

<template>
 <el-button type="default" class="save-btn" plain size="small" @click="selectPerson">选人</el-button>
</template>

在单个页面触发这个方法

 selectPerson(){
        let options=[{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
        this.$selectPerson.showDialog(options).then(res=>{
          console.log(res);
        })
      },

调用selectPerson方法