Skip to content

# Table ​

## Props ​

参数 | 类型 | 默认值 | 必填 | 说明
--- | --- | --- | --- | ---
rowKey | String | 'id' | 否 | 行唯一id
fatherRowId | String | '' | 否 | 父级行id，平级树形树结构使用。fatherRowId和childrenName只能同时存在一个
childrenName | String | '' | 否 | 树形子集的名称
tableData | Array | - | 否 | -
tableHeight | String || Number | '100%' | 否 | 表格的高度
maxHeight | String || Number | '' | 否 | 表格最大高度
headerHeight | Number | 32 | 否 | 表头的高度
cellHeight | Number | 40 | 否 | 单元格的高度 , 数值型
cellHeightType | String | 'tight' | 否 | 单元格高度类型 loose宽松,tight紧凑
headerFontSize | String | '12px' | 否 | 表头的字体大小 , px
borderColor | String | '#EBECED' | 否 | 表格边线颜色
headerFontColor | String | '#606060' | 否 | 表头的字体颜色
showBorder | [Boolean, String] | "inner" | 否 | 显示边框
dragRow | Boolean | false | 否 | 是否可以拖拽行
resizableColumn | Boolean | true | 否 | 是否可以改变列宽
disabledHideColumns | Array | () => { | 否 | 禁止隐藏的列，用于自定义列时，不可对该列进行隐藏操作
dragRowDisabledMethod | Function | () => { | 否 | 禁止行拖拽的方法，根据返回来判断所在行是否可以拖拽，true禁止手提，flase可以拖拽
dragRowSuccessMethod | Function | () => { | 否 | 拖拽的拦截，根据返回值来判断所在行是否可以拖拽成功,true可以拖拽成功，false拖拽失败。
infiniteEnabled | Boolean | false | 否 | 是否开启虚拟滚动 true开启，false关闭
paginationShow | Boolean | false | 否 | 分页器
curr | Number | 1 | 否 | 当前页
pageSize | Number | 10 | 否 | 页尺寸
count | Number | 0 | 否 | 总条数
keepSource | Boolean | true | 否 | 保持状态，防止刷新数据后树形结构恢复
mergeCells | Object | - | 否 | 合并单元格
radioConfig | Object | - | 否 | radio的配置，例如禁用某行的radio
checkboxConfig | Object | - | 否 | checkbox的配置，例如禁用某行的checkbox

## Events ​

事件名 | 说明
--- | ---
emitDragRowStart | 拖拽行，开始触发事件
emitDragRowEnd | 拖拽行，结束触发事件
handleSelectionChange | 单选或者多选时候触发
selectAll | 全选或者全不选时候触发

## Slots ​

插槽名 | 说明
--- | ---
tableColumn | -

## 使用示例 ​

vue

    <template>
      <Table />
    </template>

    <script setup>
    import { Table } from 'ysj_plugins_dps'
    </script>