ColumnSelect 选择列

说明

基于 el-table-column 封装的表格选择列。

（1）默认使用官方 type="selection" 多选列能力，支持 selectable、reserve-selection 等选择列属性；

（2）开启 single 后使用当前行能力实现单选，适合业务表格只允许选择一行的场景。

（3）单选和多选的禁用状态都由 selectable(row, index) 决定。

用法示例

多选

共 0 项数据

• 1

Go to

多选结果：暂无

<template>
  <div>
    <y-table
      :data="tableData"
      row-key="id"
      @selection-change="multipleSelection = $event">
      <y-column-select
        :selectable="isSelectable"
        :disabled-tip="getDisabledTip"
        reserve-selection />
      <y-column-text
        prop="name"
        label="姓名" />
      <y-column-text
        prop="role"
        label="角色" />
      <y-column-text
        prop="status"
        label="状态" />
    </y-table>

    <p>多选结果：{{ multipleSelection.map(item => item.name).join('、') || '暂无' }}</p>
  </div>
</template>

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

type Row = {
  id: number;
  name: string;
  role: string;
  status: 'enabled' | 'disabled';
};

const tableData: Row[] = [
  { id: 1, name: '张三', role: '管理员', status: 'enabled' },
  { id: 2, name: '李四', role: '访客', status: 'disabled' },
  { id: 3, name: '王五', role: '编辑', status: 'enabled' }
];

const multipleSelection = ref<Row[]>([]);

const isSelectable = (row: Row) => row.status === 'enabled';

const getDisabledTip = ({ row }: { row: Row }) => {
  return row.status === 'disabled' ? '当前状态不可选择' : '';
};
</script>

隐藏源码

单选

共 0 项数据

• 1

Go to

单选结果：暂无

<template>
  <div>
    <y-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      @current-change="currentRow = $event">
      <y-column-select
        single
        :selectable="isSelectable"
        :disabled-tip="getDisabledTip">
        <template #header>单选</template>
      </y-column-select>
      <y-column-text
        prop="name"
        label="姓名" />
      <y-column-text
        prop="role"
        label="角色" />
      <y-column-text
        prop="status"
        label="状态" />
    </y-table>

    <p>单选结果：{{ currentRow?.name || '暂无' }}</p>
  </div>
</template>

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

type Row = {
  id: number;
  name: string;
  role: string;
  status: 'enabled' | 'disabled';
};

const tableData: Row[] = [
  { id: 1, name: '张三', role: '管理员', status: 'enabled' },
  { id: 2, name: '李四', role: '访客', status: 'disabled' },
  { id: 3, name: '王五', role: '编辑', status: 'enabled' }
];

const currentRow = ref<Row>();

const isSelectable = (row: Row) => row.status === 'enabled';

const getDisabledTip = ({ row }: { row: Row }) => {
  return row.status === 'disabled' ? '当前状态不可选择' : '';
};
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
single	是否为单选模式	boolean	false
selectable	行是否可选，同 el-table-column 的 selectable	Function	true
disabled-tip	禁用时的提示内容，返回空值时不显示；只负责提示，不决定禁用状态	Function	—
width	列宽度	string / number	55
min-width	列最小宽度	string / number	55
tip-props	禁用提示 el-tooltip 属性	object	{placement: 'top',enterable: false,popperClass:'y-column-select__tooltip'}
resizable	是否可以通过拖动改变宽度	boolean	false
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	boolean / object	false
class-name	列的 className	string	'y-column-select'

Slots

名称	说明	参数
default	自定义选择单元格内容	object
header	单选模式表头内容	object