Table

封装表格组件实现通过配置动态生成列

使用

基础用法

当 columns 绑定的是一个具有响应式的数组时，数组的变动会影响表格变动（及动态表格）。如果不需要动态表格推荐绑定一个普通数组

<template>
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const columns = [
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ]
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

智能提示

通过辅助函数 defineTableColumns defineTableMenuColumns defineTableSelectionColumns defineTableIndexColumns defineTableExpandColumns 提供智能提示

<template>
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { defineComponent } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

获取嵌套键值

支持直接对具有嵌套结构的对象或数组进行取值，仅需要配置 prop

<template>
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { defineComponent } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Break',
        prop: 'b.c',
      },
      {
        label: 'Object',
        prop: 'b.d',
      },
      {
        label: 'Array',
        prop: 'd[0].e',
      },
    ])
    const data = [
      {
        'b.c': 'break nested value',
        b: {
          c: 'nested value c in b',
          d: 'nested value d in b',
        },
        d: [{ e: 'nested value in array' }],
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

索引表格

通过配置 index 显示索引列，支持 columns 的参数

<template>
  <pro-table :data="data" :columns="columns" :index="index" />
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  defineTableColumns,
  defineTableIndexColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const index = defineTableIndexColumns({
      label: '#',
    })
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      index,
      data,
      columns,
    }
  },
})
</script>

多选表格

通过配置 selection 显示多选框，支持 columns 的参数

<template>
  <pro-table :data="data" :columns="columns" selection />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

可展开表格

通过 #expand 插槽定制显示可展开内容，通过 expand 可进行相关配置，支持 columns 的参数

<template>
  <pro-table :data="data" :columns="columns">
    <template #expand="{ row }">
      {{ row }}
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

定义操作按钮

通过 #menu 插槽定制显示操作按钮内容，通过 menu 可进行相关配置，支持 columns 的参数

<template>
  <pro-table :data="data" :columns="columns" :menu="menu">
    <template #menu="{ size }">
      <el-button :size="size" type="primary" link> Detail </el-button>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  defineTableColumns,
  defineTableMenuColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const menu = defineTableMenuColumns({
      label: 'Operations',
      align: 'center',
    })
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      menu,
      data,
      columns,
    }
  },
})
</script>

插槽

提示

从 1.2.0 起，[prop] 相关插槽需要增加前缀 table- 使用

在 columns 中配置 render 可以使用简单的渲染函数。或者直接在模版中增加带 table-[prop] 相关的插槽

<template>
  <pro-table :data="data" :columns="columns">
    <template #table-name-header="{ column }">
      <s>{{ column.label }}</s>
    </template>
    <template #table-name="{ row, size }">
      <el-tag :size="size">
        {{ row?.name }}
      </el-tag>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, h, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
        render: '--',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
        render: (row) => h('em', null, row.address),
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

显示分页

当传入 total 数据时，将自动显示分页。可以通过 v-model:current-page 绑定当前页数、通过 v-model:page-size 绑定每页显示条目个数、通过 load 事件监听分页变动

  • 1
  • 2
  • 3
  • 4
  • 5
前往
页
共 50 条
<template>
  <pro-table
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :data="data"
    :columns="columns"
    :total="total"
    @load="load"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(50)
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    function load() {
      data.value.sort(() => (Math.random() >= 0.5 ? 1 : -1))
    }

    return {
      currentPage,
      pageSize,
      total,
      data,
      columns,
      load,
    }
  },
})
</script>

隐藏单列

通过为列配置 hide 属性可以隐藏该列。一般配合 ColumnSetting 组件使用

<template>
  <el-switch v-model="hide" />
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { computed, defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const hide = ref(true)
    const columns = computed(() =>
      defineTableColumns([
        {
          label: 'Date',
          prop: 'date',
          hide: hide.value,
        },
        {
          label: 'Name',
          prop: 'name',
        },
        {
          label: 'Address',
          prop: 'address',
        },
      ]),
    )
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    return {
      hide,
      data,
      columns,
    }
  },
})
</script>

多级表头

通过 columns 的 children 配置多级表头

<template>
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

异步表格

想要实现异步表格 columns 必须绑定一个动态数组

暂无数据
<template>
  <div style="margin-bottom: 20px">
    <el-button type="primary" @click="createTable"> Load Table </el-button>
    <el-button type="info" @click="createDict"> Load Dict </el-button>
    <el-button type="danger" @click="destroyTable"> Destroy </el-button>
  </div>
  <pro-table :data="data" :columns="columns" />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const data = ref([])
    const columns = ref(defineTableColumns([]))
    const createTable = () => {
      columns.value = defineTableColumns([
        {
          label: 'Date',
          prop: 'date',
        },
        {
          label: 'Name',
          prop: 'name',
        },
        {
          label: 'Address',
          prop: 'address',
        },
      ])
    }
    const createDict = () => {
      data.value = [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
    const destroyTable = () => {
      columns.value = []
      data.value = []
    }

    return {
      data,
      columns,
      createTable,
      createDict,
      destroyTable,
    }
  },
})
</script>

TypeScript

defineTableColumns 支持传入一个泛型用来推断 prop 值

<template>
  <pro-table :data="data" :columns="columns" :menu="menu" />
</template>

<script setup lang="ts">
import {
  defineTableColumns,
  defineTableMenuColumns,
} from 'element-pro-components'

interface DataItem {
  date: string
  name: string
  address: string
}

const menu = defineTableMenuColumns({
  label: 'Operations',
  align: 'center',
})
const columns = defineTableColumns<DataItem>([
  {
    label: 'Date',
    prop: 'date',
  },
  {
    label: 'Name',
    prop: 'name',
  },
  {
    label: 'Address',
    prop: 'address',
  },
])
const data: DataItem[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

配置

参数说明类型可选值默认值
data显示的数据array--
columns自动生成表单的参数，参考下面 columnsarray--
selection显示多选框，支持 columns 的配置boolean / object-false
index显示索引，支持 columns 的配置boolean / object-false
expand开启展开插槽，支持 columns 的配置boolean / object-false
menu开启操作按钮插槽，支持 columns 的配置boolean / object-false
show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean-false
align对齐方式stringleft / center / rightleft
header-align表头对齐方式stringleft / center / right同 align
heightTable 的高度string / number-自动高度
max-heightTable 的最大高度string / number--
stripe是否为斑马纹 tableboolean-false
border是否带有纵向边框boolean-false
sizeTable 的尺寸stringlarge / default /small-
fit列的宽度是否自撑开boolean-true
show-header是否显示表头boolean-true
highlight-current-row是否要高亮当前行boolean-false
current-row-key当前行的 key，只写属性string / number--
row-class-name为行增加 classNameFunction({row, rowIndex}) / string--
row-style为行增加 styleFunction({row, rowIndex}) / object--
cell-class-name为单元格增加 classNameFunction({row, column, rowIndex, columnIndex}) / string--
cell-style为单元格增加 styleFunction({row, column, rowIndex, columnIndex}) / object--
header-row-class-name为表头行增加 classNameFunction({row, rowIndex}) / string--
header-row-style为表头行增加 styleFunction({row, rowIndex}) / object--
header-cell-class-name为表头单元格增加 classNameFunction({row, column, rowIndex, columnIndex}) / string--
header-cell-style为表头单元格增加 styleFunction({row, column, rowIndex, columnIndex}) / object--
row-key行数据的 Key，使用 reserveSelection 功能时必填Function(row) / string--
empty-text空数据时显示的文本内容string-暂无数据
default-expand-all是否默认展开所有行boolean-false
expand-row-keysTable 目前的展开行，与 row-key 配合使用array--
default-sort默认的排序列的 prop 和顺序Objectorder: ascending, descendingascending
tooltip-effecttooltip effect 属性stringdark / light-
tooltip-options溢出 tooltip 的选项, 参见下述 tooltip 组件object--
append-filter-panel-to挂载到哪个 DOM 元素string—-
show-summary是否在表尾显示合计行boolean-false
sum-text合计行第一列的文本string-合计
summary-method自定义的合计计算方法Function({ columns, data })--
span-method合并行或列的计算方法Function({ row, column, rowIndex, columnIndex })--
select-on-indeterminate当仅有部分行被选中时，点击表头的多选框时的行为，配合 selection 使用boolean-true
indent展示树形数据时，树节点的缩进number-16
lazy是否懒加载子节点数据boolean--
load加载子节点数据的函数，lazy 为 true 时生效Function(row, treeNode, resolve)--
tree-props渲染嵌套数据的配置选项Object-{ hasChildren: ‘hasChildren’, children: ‘children’ }
table-layout设置表格单元、行和列的布局方式stringfixed / autofixed
scrollbar-always-on总是显示滚动条boolean—false
show-overflow-tooltip是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示，详请参考 tooltip-optionsboolean / object-—
flexible确保主轴的最小尺寸boolean—false
scrollbar-tabindexbody 的滚动条的包裹容器 tabindexstring / number-—
v-model:current-page当前页数number--
v-model:page-size每页显示条目个数number--
total总条目数number--
page-count总页数 total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性number--
small是否使用小型分页样式boolean-false
background是否为分页按钮添加背景色boolean-false
default-page-size每页显示条目数的初始值number--
pager-count设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠number5 ≤ x ≤ 21 的奇数7
default-current-page当前页数的初始值number--
layout组件布局，子组件名用逗号分隔stringsizes / prev / pager / next / jumper / -> / total / slot‘prev, pager, next, jumper, ->, total’
page-sizes每页显示个数选择器的选项设置number[]-[10, 20, 30, 40, 50, 100]
popper-class每页显示个数选择器的下拉框类名string--
prev-text替代图标显示的上一页文字string--
next-text替代图标显示的下一页文字string--
disabled是否禁用分页boolean-false
hide-on-single-page只有一页时是否隐藏boolean--

columns

参数说明类型可选值默认值
prop对应 data 的字段名 (必填，需要是唯一值)string--
label显示的标题string--
render通过渲染函数实现简单的插槽功能Function(row)--
hide是否在表格中隐藏boolean-false
children实现多级表头array--
columnKey当前项的 key，使用 filter-change 事件时需要string--
width对应列的宽度string--
minWidth对应列的最小宽度string--
fixed列是否固定，true 表示固定在左侧string / booleantrue / left / right-
renderHeader列标题 Label 区域渲染使用的 FunctionFunction({ column, $index })--
sortable对应列是否可以排序boolean / stringtrue / false / ‘custom’false
sortMethod对数据进行排序的时候使用的方法Function(a, b)--
sortBy指定数据按照哪个属性进行排序string / array / Function(row, index)--
sortOrders数据在排序时所使用排序策略的轮转顺序arrayascending 表示升序，descending 表示降序，null 表示还原为原始顺序[‘ascending’, ‘descending’, null]
resizable对应列是否可以通过拖动改变宽度，配合 border 使用boolean-true
formatter用来格式化内容Function(row, column, cellValue, index)--
showOverflowTooltip当内容过长被隐藏时显示 tooltipboolean-false
align对齐方式stringleft / center / rightleft
headerAlign表头对齐方式stringleft / center / right同 align
className列的 classNamestring--
labelClassName当前列标题的自定义类名string--
filters数据过滤的选项Array[{ text, value }]--
filterPlacement过滤弹出框的定位stringtop / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end-
filterMultiple数据过滤的选项是否多选boolean-true
filterMethod数据过滤使用的方法Function(value, row, column)--
filteredValue选中的数据过滤项array--
index自定义索引，只能够在 index 中配置Function(index) / number--
selectable这一行的 CheckBox 是否可以勾选，只能够在 selection 中配置Function(row, index)--
reserveSelection是否保留之前选中的数据（需指定 row-key），只能够在 selection 中配置boolean-false

事件

事件名说明类型
loadpageSize 和 currentPage 改变时会触发() => void
select当用户手动勾选数据行的 Checkbox 时触发的事件(selection: any[], row: any) => void
select-all当用户手动勾选全选 Checkbox 时触发的事件(selection: any[]) => void
selection-change当选择项发生变化时会触发该事件(newSelection: any[]) => void
cell-mouse-enter当单元格 hover 进入时会触发该事件(row: any, column: any, cell: HTMLTableCellElement, event: Event) => void
cell-mouse-leave当单元格 hover 退出时会触发该事件(row: any, column: any, cell: HTMLTableCellElement, event: Event) => void
cell-click当某个单元格被点击时会触发该事件(row: any, column: any, cell: HTMLTableCellElement, event: Event) => void
cell-dblclick当某个单元格被双击击时会触发该事件(row: any, column: any, cell: HTMLTableCellElement, event: Event) => void
row-click当某一行被点击时会触发该事件(row: any, column: any, event: Event) => void
row-contextmenu当某一行被鼠标右键点击时会触发该事件(row: any, column: any, event: Event) => void
row-dblclick当某一行被双击时会触发该事件(row: any, column: any, event: Event) => void
header-click当某一列的表头被点击时会触发该事件(column: any, event: Event) => void
header-contextmenu当某一列的表头被鼠标右键点击时触发该事件(column: any, event: Event) => void
sort-change当表格的排序条件发生变化的时候会触发该事件(data: {column: any, prop: string, order: any }) => void
filter-change当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。(newFilters: any) => void
current-change当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性(currentRow: any, oldCurrentRow: any) => void
header-dragend当拖动表头改变了列的宽度的时候会触发该事件(newWidth: number, oldWidth: number, column: any, event: MouseEvent) => void
expand-change当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）(row: any, expandedRows: any[]) => void & (row: any, expanded: boolean) => void

方法

方法名说明类型
clearSelection用于多选表格，清空用户的选择() => void
getSelectionRows返回当前选中的行() => any[]
toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）(row: any, selected?: boolean, ignoreSelectable = true) => void
toggleAllSelection用于多选表格，切换全选和全不选() => void
toggleRowExpansion用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）(row: any, expanded?: boolean) => void
setCurrentRow用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。(row: any) => void
clearSort用于清空排序条件，数据会恢复成未排序的状态() => void
clearFilter不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件(columnKeys?: string[]) => void
doLayout对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法() => void
sort手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。(prop: string, order: string) => void
scrollTo滚动到一组特定坐标(options: number | ScrollToOptions, yCoord?: number) => void
setScrollTop设置垂直滚动位置(top?: number) => void
setScrollLeft设置水平滚动位置(left?: number) => void
columns获取表列的 contextTableColumnCtx<T>[]
updateKeyChildren适用于 lazy Table, 需要设置 rowKey, 更新 key children(key: string, data: T[]) => void

插槽

名称说明类型
-在右侧菜单前插入的任意内容-
menu表格右侧自定义按钮{ size, row, column, $index }
expand当前这列展开显示的内容{ row, column, $index }
append插入至表格最后一行之后的内容-
table-[prop]当前这列的内容{ size, row, column, $index }
table-[prop]-header当前这列表头的内容{ size, column, $index }

提示

[prop] 为 columns 中定义的 prop