## 人员和部门选择表弹窗
介绍人员和部门选择表的使用
:::demo
``` html
<template>
  <div class='pb20' >
    <el-button type='primary' @click='isPerson1=true'>选择人员+部门+岗位</el-button>
    <span >{{checkList1 ? checkList1.map(item => item.name).join(',') : ''}}</span>
    <mg-persondialog :check-list="checkList1" :person='true' :department='true' :post='true' @on-submit="onSubmit1" v-if="isPerson1"></mg-persondialog>
  </div>
  <div class='pb20'>
    <el-button type='primary' @click='isPerson2=true'>选择部门</el-button>
    <span >{{checkList2 ? checkList2.map(item => item.name).join(',') : ''}}</span>
    <mg-persondialog :check-list="checkList2" :department='true' @on-submit="onSubmit2" v-if="isPerson2"></mg-persondialog>
  </div>
  <div class='pb20'>
    <el-button type='primary' @click='isPerson3=true'>选择人员</el-button>
    <span >{{checkList3 ? checkList3.map(item => item.name).join(',') : ''}}</span>
    <mg-persondialog :check-list="checkList3" :person='true' @on-submit="onSubmit3" v-if="isPerson3"></mg-persondialog>
  </div>
  <div>
    <el-button type='primary' @click='isPerson4=true'>选择岗位</el-button>
    <span >{{checkList4 ? checkList4.map(item => item.name).join(',') : ''}}</span>
    <mg-persondialog :check-list="checkList4" :post='true' @on-submit="onSubmit4" v-if="isPerson4"></mg-persondialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isPerson1:false,
      isPerson2:false,
      isPerson3:false, 
      isPerson4:false,
      checkList1:[],
      checkList2:[],
      checkList3:[],
      checkList4:[],
    }
  },
  method:{
    onSubmit1(data){
      this.checkList1 = data;
      this.isPerson1 = false;
    },
    onSubmit2(data){
      this.checkList2 = data;
      this.isPerson2 = false;
    },
    onSubmit3(data){
      this.checkList3 = data;
      this.isPerson3 = false;
    },
    onSubmit4(data){
      this.checkList4 = data;
      this.isPerson4 = false;
    }
  }
}
</script>
```
:::

<template>
    <div class='py20'>
      persondialog 属性
      <mg-table  :column="optionsTable.col" :dataList="dataList " page="false" :params="optionsTable.params" align='left'  >
      </mg-table>
    </div>
</template>
<script>
export default {
  components:{},
  data () {
    return {
      isPerson1:false,
      isPerson2:false,
      isPerson3:false,
      isPerson4:false,
      checkList1:[],
      checkList2:[],
      checkList3:[],
      checkList4:[],
      form: {
        cascader:[]
      },
      optionsTable: {
        params: {},
        col: [
          {
            label: '参数',
            prop: 'name',
            width: '180px'
          },
          {
            label: '说明',
            prop: 'show',
          },
          {
            label: '类型',
            prop: 'type',
            width: '120px'
          },
          {
            label: '可选值',
            prop: 'option',
             width: '220px'
          },
          {
            label: '默认值',
            prop: 'default',
             width: '120px'
          }
        ],
      },
      dataList:[
        {
         name:'post',
         show:'岗位,默认:false',
         type:' Boolean ',
         option:'默认:false',
         default:'',
        },
        {
         name:'person',
         show:'人员,默认:false',
         type:' Boolean ',
         option:'默认:false',
         default:'',
        },
        {
         name:'deparment',
         show:'部门,默认:false',
         type:' Boolean ',
         option:'默认:false',
         default:'',
        },
      ],
    }
  },
  methods:{
    onSubmit1(data){
      this.checkList1 = data;
      this.isPerson1 = false;
    },
    onSubmit2(data){
      this.checkList2 = data;
      this.isPerson2 = false;
    },
    onSubmit3(data){
      this.checkList3 = data;
      this.isPerson3 = false;
    },
    onSubmit4(data){
      this.checkList4 = data;
      this.isPerson4 = false;
    }
  }
}
</script>