跳至主要內容

Vben Admin table 组件

黄曦小于 1 分钟tabletable

index.js

// 导出类型 export type 其他类似导出
export type { EditRecordRow } from "./src/components/editable";
// 将./src/BasicTaskTable.vue 目录下的默认导出重命名为BasicTaskTable,然后导出
export { default as BasicTaskTable } from "./src/BasicTaskTable.vue";
// 导出所有内容,常用单个文件来合并
export *

BasicTable.vue

  1. 最外层容器通过是否使用表单来确定 marginTop.marginTop: getBindValues.useSearchForm ? 0 : 20
  2. v-bind="getBindValues" getBindValues 中的值都会绑定到 table 上面.
  3. 平时配置的列都是放在这个插槽里,遍历每一个列. 然后参数传到<HeaderCell>这个组件里,作为表头
<template
  #[`header-${column.dataIndex}`]
  v-for="column in columns"
  :key="column.dataIndex"
>
  <HeaderCell :column="column" />
</template>