InputTable 表格选择

avue-input-table：单选建议初始化为字符串编码，多选初始化为编码数组；表格内保存选中记录，对外按 props.value 输出编码。

通用属性、字典和事件见 基础组件使用约定。模板用 kebab-case，Form 配置对象用 camelCase。

基础用法

效果预览可直接操作下方示例

操作示例并观察绑定值，初始值与字典编码保持相同类型。

正在加载示例…

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :md="12">
      <p>单选编码</p>
      <avue-input-table v-model="single" :props="props" :children="children" :on-load="onLoad" placeholder="请选择成员" />
    </el-col>
    <el-col :xs="24" :md="12">
      <p>多选编码数组</p>
      <avue-input-table v-model="multiple" multiple :props="props" :children="children" :on-load="onLoad" placeholder="请选择成员" />
    </el-col>
  </el-row>
  <pre>{{ JSON.stringify({ single, multiple, request }, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const single = ref('0');
const multiple = ref(['0', '2']);
const request = ref(null);
const rows = [
  { id: '0', name: '成员 A', role: '开发' },
  { id: '1', name: '成员 B', role: '设计', disabled: true },
  { id: '2', name: '成员 C', role: '测试' },
];
const props = { label: 'name', value: 'id' };
const children = {
  rowKey: 'id', border: true,
  column: [
    { label: '姓名', prop: 'name', search: true, searchSpan: 24 },
    { label: '角色', prop: 'role' },
  ],
};
function onLoad({ value, page, data }, callback) {
  if (value !== undefined) {
    const ids = Array.isArray(value) ? value : [value];
    callback(rows.filter((row) => ids.includes(row.id)));
    return;
  }
  const filtered = rows.filter((row) => row.name.includes(data?.name || ''));
  const current = page?.currentPage || 1;
  const size = page?.pageSize || 10;
  request.value = { currentPage: current, search: data || {} };
  callback({ total: filtered.length, data: filtered.slice((current - 1) * size, current * size) });
}
</script>

属性

属性	类型	默认值	说明
props	object	label/value	记录的文字、值、禁用键映射
children	object	{}	弹窗内 CRUD 配置，例如 column/rowKey
onLoad	function	—	({ value, page, data }, callback)；回显和列表查询共用
formatter	function	—	单选接收记录，多选接收记录数组，返回显示文本
multiple	boolean	false	多选
beforeClose	function	—	确认选中或请求关闭时调用，done() 继续该次操作
dialogWidth	string	80%	弹窗宽度
prefixIcon / suffixIcon	string	—	输入框图标

onLoad 的两种返回结构

当参数中存在 value 时，回显应调用 callback(record) 或 callback(records)。列表查询时用 callback({ total, data: records })，其中 page 是分页参数，data 是搜索表单。

不要用 if (value) 区分请求，数字 0 也是有效编码。可判断 value !== undefined，同时正确处理空字符串和空数组。回显记录的编码类型必须与绑定值一致。

beforeClose 会用于确认选中和弹窗关闭请求；回调只接收继续函数，不能仅凭参数区分关闭原因。