vue2-quick-select-dialog

一个与业务无关的 Vue 2.7 + Element UI 数据选取弹窗组件。左侧是可搜索、可分页的表格（单选 / 多选），右侧是实时联动的已选列表，确认后将完整的已选对象数组回传给父组件。组件本身不维护任何业务数据——数据、列配置、搜索配置、分页全部由父组件通过 props 传入，搜索 / 分页通过事件回传，父组件异步加载后再回灌。

特性

• 单选 / 多选，支持最大可选数量限制
• 表格上方可配置搜索栏（input / select），下方分页器
• 右侧已选列表，可单个删除、一键清空，与表格实时联动
• 跨页 / 搜索后选中态保持（基于 rowKey 匹配，不依赖当前页数据）
• 草稿态：弹窗内修改，确认才提交，取消则还原
• 默认触发按钮 + “已选：n”，也可 ref 命令式打开，或用 trigger 插槽完全自定义
• 列、已选项均支持作用域插槽自定义渲染

安装

npm i vue2-quick-select-dialog

vue 与 element-ui 是 peerDependencies，需由宿主项目自行安装。

使用

全局注册：

import Vue from 'vue'
import QuickSelect from 'vue2-quick-select-dialog'
import 'vue2-quick-select-dialog/style.css'

Vue.use(QuickSelect)

或按需引入（局部注册）：

import QuickSelect from 'vue2-quick-select-dialog'
import 'vue2-quick-select-dialog/style.css'

export default {
  components: { QuickSelect }
}

模板：

<quick-select
  v-model="selected"
  ref="qs"
  title="选择用户"
  row-key="id"
  label-key="name"
  :multiple="true"
  :max-count="5"
  :table-data="tableData"
  :columns="columns"
  :search-fields="searchFields"
  :total="total"
  :loading="loading"
  :current-page.sync="page"
  :page-size.sync="pageSize"
  @query-change="loadData"
  @confirm="onConfirm"
/>

methods: {
  // 搜索 / 翻页 / 改每页条数 都会触发，父组件据此异步加载
  loadData(query) {
    const { page, pageSize, searchValues } = query
    this.loading = true
    api.fetch({ page, pageSize, ...searchValues }).then(res => {
      this.tableData = res.list
      this.total = res.total
      this.loading = false
    })
  },
  onConfirm(rows) {
    // rows = 完整已选对象数组
  }
}

Props

| 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value / v-model | Array | [] | 已选数据（完整对象数组） | | tableData | Array | [] | 当前页表格数据 | | columns | Array | [] | 列配置，见下 | | searchFields | Array | [] | 搜索字段配置，见下 | | inlineSearchCount | Number | 2 | 内联区展示的搜索条件数量，超出收进“更多”弹层 | | morePopoverWidth | String\|Number | 300 | “更多”弹层宽度 | | rowKey | String | 'id' | 行唯一标识字段（数据缺失该字段会在控制台告警） | | multiple | Boolean | true | 多选 / 单选（单选模式可点击已选项取消） | | showPagination | Boolean | true | 是否显示分页器 | | showIndex | Boolean | true | 是否显示序号列（按页码 × 每页条数自动累加） | | indexLabel | String | '序号' | 序号列标题 | | preview | Boolean | false | 预览（只读）模式：仅查看，不能勾选 / 删除，底部仅显示「关闭」按钮 | | maxCount | Number | 0 | 最大可选数（仅多选，0 不限制） | | minCount | Number | 0 | 最小可选数，确认时校验（0 不限制） | | selectable | Function | null | (row, index) => boolean，返回 false 时该行禁用、不可勾选 | | defaultSearch | Object | {} | 初始搜索条件，也是重置 / 打开时回到的默认值 | | beforeConfirm | Function | null | (rows) => boolean \| Promise<boolean>，返回 false（或 reject）阻止确认 | | labelKey | String | '' | 已选列表展示字段（缺省取第一列 prop） | | emptyText | String | '-' | 单元格空值（null / undefined / 空字符串）的占位文案 | | total | Number | 0 | 总条数 | | currentPage | Number | 1 | 当前页（支持 .sync） | | pageSize | Number | 10 | 每页条数（支持 .sync） | | pageSizes | Array | [10,20,50,100] | 每页条数可选项 | | paginationLayout | String | 'total, sizes, prev, pager, next, jumper' | 分页布局 | | loading | Boolean | false | 表格加载态 | | title | String | '请选择数据' | 弹窗标题 | | buttonText | String | '选择数据' | 触发按钮文案 | | showTrigger | Boolean | true | 是否显示默认触发按钮（隐藏后用 ref.open() 打开） | | showCount | Boolean | true | 是否显示按钮旁的“已选：n”文案 | | countText | String | '' | 自定义“已选：n”文案 | | confirmText / cancelText | String | '确认' / '取消' | 底部按钮文案 | | closeText | String | '关闭' | 预览模式底部按钮文案 | | dialogWidth | String | '1000px' | 弹窗宽度 | | rightWidth | String\|Number | '250px' | 右侧已选列表宽度（左侧自适应） | | tableHeight | String\|Number | 420 | 表格高度 | | queryOnOpen | Boolean | true | 打开时自动触发一次 query-change | | resetPageOnOpen | Boolean | false | 打开时重置到第一页 | | resetSearchOnOpen | Boolean | true | 打开时重置搜索条件与排序（回到 defaultSearch），避免残留上次状态 | | disabled | Boolean | false | 禁用触发按钮 |

columns 项

{ prop: 'name', label: '姓名', width, minWidth, align, slot, formatter, sortable, fixed, showOverflowTooltip }

• slot 指定后，可用同名作用域插槽自定义该列渲染。
• formatter(row, col) 返回值用于格式化单元格文案（未配 slot 时生效）。
• fixed：设为 'left' / 'right'（或 true 等同 'left'）使该列在横向滚动时固定。选择列（单选 / 多选）与序号列默认固定在最左侧，无需配置。
• sortable：设为 'custom' 开启服务端排序（点击表头会触发 sort-change 与 query-change，排序信息在 query.sort 中）；设为 true 为前端排序。
• showOverflowTooltip：默认开启（内容过长时单行省略 + 悬浮 tooltip 显示完整内容），需关闭时显式设为 false。空值单元格显示 emptyText（默认 -）。

searchFields 项

{
  prop: 'name',
  label: '姓名',
  placeholder,
  // 控件类型
  type: 'input' | 'select' | 'date' | 'daterange' | 'datetime' | 'datetimerange',
  options: [{ label, value }], // type 为 select 时
  valueFormat,                  // 日期类型回传值格式，默认 'yyyy-MM-dd'（datetime 系默认 'yyyy-MM-dd HH:mm:ss'）
  format,                       // 日期类型显示格式，默认同 valueFormat
  rangeSeparator, startPlaceholder, endPlaceholder, // 范围类型可选
  attrs: {}                     // 透传给底层控件的任意 props（见下）
}

attrs 会原样透传给底层的 el-input / el-select / el-date-picker，用于开启控件自身的能力，例如：

// 可搜索 + 多选的下拉
{ prop: 'tags', label: '标签', type: 'select', options, attrs: { filterable: true, multiple: true, collapseTags: true } }

// 远程搜索下拉
{ prop: 'user', label: '用户', type: 'select', attrs: { filterable: true, remote: true, remoteMethod: fn, loading: bool } }

// 带快捷选项 / 限制可选范围的日期
{ prop: 'date', label: '日期', type: 'date', attrs: { pickerOptions: { disabledDate, shortcuts } } }

attrs 优先级最高，可覆盖组件默认的 clearable / size / placeholder 等。多选下拉的空值会自动初始化为 []。

支持的 type：

| type | 控件 | searchValues[prop] 回传值 | | --- | --- | --- | | input（默认） | 文本框 | String，回车触发搜索 | | select | 下拉选择 | 选项 value | | date | 日期选择 | String，默认 '2024-01-01' | | daterange | 日期范围 | [start, end] 两个字符串，如 ['2024-01-01', '2024-01-31'] | | datetime | 日期时间 | String，默认 '2024-01-01 12:00:00' | | datetimerange | 日期时间范围 | [start, end] 两个字符串 |

内联区展示前 inlineSearchCount（默认 2）个条件，其余条件收进“重置”按钮后的「更多」弹层；弹层底部同样提供重置 / 搜索按钮，与内联区共享同一份查询条件。日期类型默认回传 YYYY-MM-DD 字符串（Element UI 的格式符为小写 yyyy-MM-dd）。

事件

| 事件 | 参数 | 说明 | | --- | --- | --- | | query-change | { page, pageSize, searchValues, sort } | 搜索 / 翻页 / 改每页条数 / 排序时触发；sort 为 { prop, order } | | sort-change | { prop, order } | 表头排序变化（order 为 'ascending' / 'descending' / ''） | | change | Array | v-model 更新（确认时） | | confirm | Array | 确认，回传完整已选对象数组 | | cancel | — | 点击取消 | | open / close | — | 弹窗打开 / 关闭 | | over-limit | Number | 超过最大可选数量 | | min-limit | Number | 确认时未达最小可选数量 | | update:currentPage / update:pageSize | Number | 配合 .sync |

插槽

| 名称 | 作用域 | 说明 | | --- | --- | --- | | trigger | { open, count } | 完全自定义触发区 | | selected | { item } | 自定义右侧已选项渲染 | | [col.slot] | { row, $index } | 自定义对应列渲染 | | empty | — | 表格空数据 |

ref 方法

this.$refs.qs.open()
this.$refs.qs.close()

开发

npm install
npm run dev     # 本地调试（dev/App.vue）
npm run build   # 构建库到 dist/

License

MIT