List Table Select 列表选择器

通过数据驱动渲染多个表格选择器组件，适用于批量选择场景。

基础用法

通过 items 配置数组驱动渲染多个 WTableSelect 组件。

modelValue 为对象格式，key 对应 items 中每个配置项的 key 字段。

vue

<template>
  <div>
    <div class="mt-4">
      <w-title>当前选中值：</w-title>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
    <wi-list-table-select
      ref="listTableSelectRef"
      v-model="formData"
      :items="items"
      deletable
      addable
      layout="horizontal"
      :column-gap="16"
      @change="handleChange"
      @remove="handleRemove"
      @add="handleAdd"
    />
    <div class="flex mt-8" style="gap: 8px">
      <w-button type="primary" @click="handleGetValue"
        >getValue('user')</w-button
      >
      <w-button type="primary" @click="handleSetValue"
        >setValue('user', 2)</w-button
      >
      <w-button type="primary" @click="handleClear">clear('user')</w-button>
      <w-button type="primary" @click="handleClearAll">clearAll</w-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage } from 'win-design-next'

let counter = 0

const listTableSelectRef = ref()
const formData = ref<Record<string, any>>({
  user: undefined,
  dept: undefined,
})

const items = ref([
  {
    key: 'user',
    label: '用户',
    placeholder: '请选择用户',
    options: [
      { id: 1, name: '张三', code: 'U001', status: '在职' },
      { id: 2, name: '李四', code: 'U002', status: '在职' },
      { id: 3, name: '王五', code: 'U003', status: '离职' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'code', label: '工号', width: 100 },
      { prop: 'status', label: '状态' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
  {
    key: 'dept',
    label: '部门',
    placeholder: '请选择部门',
    options: [
      { id: 1, name: '研发部', code: 'D001' },
      { id: 2, name: '产品部', code: 'D002' },
      { id: 3, name: '设计部', code: 'D003' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '部门名称', width: 120 },
      { prop: 'code', label: '部门编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
])

// Events
const handleChange = (value: Record<string, any>, key: string) => {
  console.log(`change:`, value, key)
}

const handleRemove = (key: string) => {
  const index = items.value.findIndex((item) => item.key === key)
  if (index > -1) {
    items.value.splice(index, 1)
  }
  console.log(`remove: ${key}`)
}

const handleAdd = () => {
  // 校验：所有选择器都已选择值，才允许添加
  const hasEmpty = items.value.some((item) => formData.value[item.key] == null)
  if (hasEmpty) {
    WMessage.error('请先选择所有选项')
    return
  }

  counter++
  const key = `select_${counter}`
  items.value.push({
    key,
    label: `选择器${counter}`,
    placeholder: '请选择',
    options: [
      { id: 1, name: '选项一', code: 'O001' },
      { id: 2, name: '选项二', code: 'O002' },
      { id: 3, name: '选项三', code: 'O003' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '名称', width: 120 },
      { prop: 'code', label: '编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  })
  formData.value[key] = undefined
}

// Methods
const handleGetValue = () => {
  const val = listTableSelectRef.value?.getValue('user')
  console.log(`getValue('user') = ${JSON.stringify(val)}`)
}

const handleSetValue = () => {
  listTableSelectRef.value?.setValue('user', 2)
  console.log(`setValue('user', 2)`)
}

const handleClear = () => {
  listTableSelectRef.value?.clear('user')
  console.log(`clear('user')`)
}

const handleClearAll = () => {
  listTableSelectRef.value?.clearAll()
  console.log('clearAll')
}
</script>

垂直布局

设置 layout 为 vertical 可以切换为垂直布局。

vue

<template>
  <div>
    <div class="mt-4">
      <w-title>当前选中值：</w-title>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
    <wi-list-table-select
      v-model="formData"
      :items="items"
      layout="vertical"
      :row-gap="12"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const formData = ref({
  user: undefined,
  dept: undefined,
  role: undefined,
})

const items = ref([
  {
    key: 'user',
    label: '用户',
    placeholder: '请选择用户',
    options: [
      { id: 1, name: '张三', code: 'U001', status: '在职' },
      { id: 2, name: '李四', code: 'U002', status: '在职' },
      { id: 3, name: '王五', code: 'U003', status: '离职' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'code', label: '工号', width: 100 },
      { prop: 'status', label: '状态' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
  {
    key: 'dept',
    label: '部门',
    placeholder: '请选择部门',
    options: [
      { id: 1, name: '研发部', code: 'D001' },
      { id: 2, name: '产品部', code: 'D002' },
      { id: 3, name: '设计部', code: 'D003' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '部门名称', width: 120 },
      { prop: 'code', label: '部门编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
  {
    key: 'role',
    label: '角色',
    placeholder: '请选择角色',
    options: [
      { id: 1, name: '管理员', code: 'R001' },
      { id: 2, name: '普通用户', code: 'R002' },
      { id: 3, name: '访客', code: 'R003' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '角色名称', width: 120 },
      { prop: 'code', label: '角色编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
])
</script>

禁用状态

可以通过全局 disabled 禁用所有选择器，或通过单个 item 的 disabled 禁用特定选择器。

vue

<template>
  <div>
    <w-title class="mb-4">全局禁用</w-title>
    <wi-list-table-select
      v-model="formData1"
      :items="items"
      disabled
      class="mb-6"
    />

    <w-title class="mb-4">单项禁用</w-title>
    <wi-list-table-select v-model="formData2" :items="itemsWithDisabled" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const formData1 = ref({
  user: 1,
  dept: 1,
})

const formData2 = ref({
  user: undefined,
  dept: undefined,
})

const items = ref([
  {
    key: 'user',
    label: '用户',
    placeholder: '请选择用户',
    options: [
      { id: 1, name: '张三', code: 'U001' },
      { id: 2, name: '李四', code: 'U002' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'code', label: '工号' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
  {
    key: 'dept',
    label: '部门',
    placeholder: '请选择部门',
    options: [
      { id: 1, name: '研发部', code: 'D001' },
      { id: 2, name: '产品部', code: 'D002' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '部门名称', width: 120 },
      { prop: 'code', label: '部门编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
])

const itemsWithDisabled = ref([
  {
    key: 'user',
    label: '用户',
    placeholder: '请选择用户',
    disabled: true,
    options: [
      { id: 1, name: '张三', code: 'U001' },
      { id: 2, name: '李四', code: 'U002' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'code', label: '工号' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
  {
    key: 'dept',
    label: '部门',
    placeholder: '请选择部门',
    options: [
      { id: 1, name: '研发部', code: 'D001' },
      { id: 2, name: '产品部', code: 'D002' },
    ],
    columns: [
      { prop: 'id', label: 'ID', width: 80 },
      { prop: 'name', label: '部门名称', width: 120 },
      { prop: 'code', label: '部门编码' },
    ],
    props: {
      label: 'name',
      value: 'id',
      prefixLabel: 'code',
    },
  },
])
</script>

ListTableSelect API

Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值，对象格式，key 对应 items 中的 key	`object`	{}
items	列表选择项配置数组	`array`	[]
disabled	是否禁用所有选择器	`boolean`	false
size	全局尺寸设置，会被 item 中的 size 覆盖	`string`	'default'
clearable	全局可清空设置，会被 item 中的 clearable 覆盖	`boolean`	false
deletable	全局可删除设置，会被 item 中的 deletable 覆盖	`boolean`	false
addable	是否显示添加按钮	`boolean`	false
layout	布局方式	`string`	'horizontal'
column-gap	列间距（horizontal 布局时）	`number` / `string`	16
row-gap	行间距（vertical 布局时）	`number` / `string`	16

ListTableSelectItem 配置

属性名	说明	类型	默认值
key	唯一标识 key	`string`	—
label	标签文本	`string`	—
placeholder	占位文本	`string`	—
options	下拉选项数据	`array`	—
columns	表格列配置	`array`	—
props	选项字段映射配置，支持 prefixLabel 字段用于显示前置标签	`object`	—
disabled	是否禁用	`boolean`	false
clearable	是否可清空	`boolean`	false
multiple	是否多选	`boolean`	false
size	尺寸	`string`	—
deletable	是否可删除	`boolean`	false
table-width	表格宽度	`number` / `string`	—
table-max-height	表格最大高度	`number` / `string`	—
placement	弹出层位置	`string`	—
popper-class	弹出层类名	`string`	—

Events

事件名	说明	类型
change	当任意选择器值变化时触发	`Function`
remove	删除某项数据时触发	`Function`
add	点击添加按钮时触发	`Function`

Methods

方法名	说明	参数
getValue	获取某个 key 对应的值	`(key: string)`
setValue	设置某个 key 对应的值	`(key: string, value: any)`
clearAll	清空所有值	—
clear	清空某个 key 的值	`(key: string)`
remove	删除某个 key 并触发 remove 事件，由父组件移除 items 中对应项	`(key: string)`

Radio 单选框

Tag 标签

List Table Select 列表选择器 ​

基础用法 ​

垂直布局 ​

禁用状态 ​

ListTableSelect API ​

Attributes ​

ListTableSelectItem 配置 ​

Events ​

Methods ​