Vue自定义控件封装---数据选择框

控件背景：做业务系统，我们都知道，经常会用一些弹框，然后进行数据选择，选择完之后，将数据返回到上一个页面，并关闭当前弹框

目的：

1. 主要是为了减少代码量，提高工作效率
2. 将更多的一些配置放到数据库中，后续调整的时候，主要调整数据库，减少代码的调整率，同时也就减少了系统部署的次数

实现结果：

1.前端

// 引用控件
import userSelect from '@/layout/components/DataSelect/SelectDataDialog'
// 注册控件
components: { userSelect },
// 调用控件
<userSelect v-if="SelectSetting.isVisible" ref="userSelectDialog" :stylecss="StyleCss" :selectsetting="SelectSetting" :selecteventcall="selectDirectorUserEnd" />
// 参数配置
StyleCss: {},
SelectSetting: {
    SelectCode: 'SelectDepartmentUserList',
    isVisible: false,
    dialogTitle: '选择负责人',
    dialogWidth: '500px',
    dialogHight: '250px',
    rowKey: 'UserId',
    selectionType: 'selection',
    filterStr: '',
    columns: [
          { key: 'USERNAME', label: '用户姓名', prop: 'USERNAME' },
          { key: 'USERACCOUNT', label: '登陆账号', prop: 'USERACCOUNT' },
          { key: 'UserSexCN', label: '性别', prop: 'UserSexCN' }
        ]
    }
}

2.数据库配置表

3. 后端需提供一个接口，按照SELCODE查找数据，并返回前段DataTable数据，此处不多说，有不懂得可以私信我

控件实现逻辑

1.参数说明

// 配置参数说明
SelectSetting: {
      SelectCode: 'SelectDeptUserList',  // 对应表sys_select的SELCODE
      isVisible: false,
      dialogTitle: '选择负责人',  // 弹框标题
      dialogWidth: '500px', // 弹框宽度
      dialogHight: '250px', // 弹框高度
      rowKey: '