CpSelectDialog 选择弹窗

对齐旧版 SelectDialog.ts（94 处调用）：单选双击行即确认、多选 checkbox+全选、仅一条结果自动选中、打开自动聚焦搜索框、回车检索，auto-search 开启后输入即自动检索（es-toolkit 防抖）。多选模式下搜索到与关键词完全相等的行会自动勾选，配合 row-key 多次搜索间勾选可累积，checked-values 可在打开时按已有值回显勾选，确认后一次性返回全部勾选行。按钮默认左上角（老逻辑），位置可配。

组件用法（单选）

组件用法（单选）

双击行直接确认关闭；输入关键字回车在结果内过滤（search-in-result）。

<template>
  <div class="demo-row">
    <el-button @click="visible = true">打开选择弹窗</el-button>
    <span class="demo-value"
      >已选: {{ picked.map((r) => r.Code).join(", ") || "-" }}</span
    >
    <CpSelectDialog
      v-model="visible"
      title="选择港口"
      :data="ports"
      search-in-result
      @confirm="(rows) => (picked = rows)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PORTS } from "../ports";

const ports = PORTS;
const visible = ref(false);
const picked = ref<Record<string, any>[]>([]);
</script>

显示代码 ▼

函数式调用 showSelectDialog()

函数式调用 showSelectDialog()

对齐旧版 SelectDialog.show(options, fnOk) 习惯：await 返回选中行数组，取消返回空数组。load 回调对接远程检索。需先 app.use(CargoUI)。

<template>
  <div class="demo-row">
    <el-button @click="pickMulti">多选（函数式）</el-button>
    <el-button @click="pickRemote">远程检索（load 回调）</el-button>
    <span class="demo-value"
      >已选: {{ picked.map((r) => r.Code).join(", ") || "-" }}</span
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showSelectDialog } from "../../src/selectDialog";
import { PORTS } from "../ports";

const picked = ref<Record<string, any>[]>([]);

async function pickMulti() {
  picked.value = await showSelectDialog({
    title: "选择港口（多选）",
    data: PORTS,
    multiple: true,
    searchInResult: true,
  });
}

async function pickRemote() {
  picked.value = await showSelectDialog({
    title: "选择港口（远程检索）",
    load: async (query) => {
      await new Promise((r) => setTimeout(r, 400)); // 模拟接口延迟
      const kw = query.toUpperCase();
      return kw
        ? PORTS.filter((p) => p.Code.includes(kw) || p.Name.includes(query))
        : PORTS;
    },
  });
}
</script>

显示代码 ▼

按钮位置

按钮位置

actions-position 支持四角，默认 top-left；actions 插槽可完全自定义按钮区。

<template>
  <div class="demo-row">
    <el-button v-for="pos in positions" :key="pos" @click="open(pos)">
      {{ pos }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { showSelectDialog } from "../../src/selectDialog";
import { PORTS } from "../ports";

const positions = [
  "top-left",
  "top-right",
  "bottom-left",
  "bottom-right",
] as const;

function open(pos: (typeof positions)[number]) {
  showSelectDialog({
    title: `按钮位置：${pos}`,
    data: PORTS,
    searchInResult: true,
    actionsPosition: pos,
  });
}
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
v-model	—	boolean	false
title	—	string	"请选择"
columns	列定义，默认 Code/Name 两列（对应旧版 codeField/nameField 约定）	CpSelectColumn[]	() => [ { field: "Code", title: "代码", width: 140 }…
data	静态数据源	Record[]	—
load	远程数据源：(query, ctx) => rows；与 searchInResult 互斥。 ctx.signal 透传给请求库即可取消上一次检索；过期响应组件会自行丢弃。	CpLoader	—
multiple	—	boolean	—
searchable	—	boolean	true
search-in-result	在已加载结果内过滤而非重新请求	boolean	—
auto-select-single	结果仅一条时自动选中	boolean	true
auto-check-match	多选模式：检索关键词与某行任一列完全相等（大小写不敏感）时自动勾选该行	boolean	true
row-key	行唯一键字段；多选时用于跨检索保留勾选（el-table reserve-selection）	string	—
checked-values	打开弹窗时按 rowKey 匹配自动勾选（多选）/ 高亮（单选）的已有值	TSParenthesizedType[]	—
auto-search	搜索框输入即自动检索（防抖），false 时需回车或点检索按钮	boolean	—
auto-search-delay	自动检索防抖间隔 ms	number	300
width	—	string | number	580
auto-open	挂载后立即打开（供函数式 showSelectDialog 使用，无需父级 v-model）	boolean	—
actions-position	确定/取消按钮位置，默认左上角（老逻辑）；actions 插槽可完全自定义内容	"top-left" | "top-right" | "bottom-left" | "bottom-right"	"top-left"
confirm-text	—	string	"确定"
cancel-text	—	string	"取消"

事件 Events

事件	说明	回调参数
@confirm	—	(Array)
@cancel	—	—
@closed	关闭动画结束（透传 el-dialog closed，供函数式调用清理挂载点）	—

插槽 Slots

插槽	说明	作用域参数
actions	—	confirm, cancel
[field]	—	name