基础表格组件

Table 配置项

API

| 参数 | 说明 | 类型 | 默认值 | | ------------ | -------------------------------------------------------------------------------------------------- | ------ | ------ | | data | 表格数据 | Array | [] | | columns | 表格列的配置描述，具体项见下表 | Array | [] | | pagination | 分页器，配置项参考 element-plus 文档 | Object | - | | tableEvents | 表格事件，配置项参考 element-plus 文档 | Object | - | | tableOptions | 表格配置项，配置项参考 element-plus 文档 | Object | - |

事件

| 事件名称 | 说明 | 回调参数 | | --------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------- | | loadTableData | 当前页发生改变的时候触发 | pagination:{page,pageSize } | | element-ui 事件 | 参考element-plus 文档,统一放在上文 tableEvents 里面 | - | | getPagination | 获取当前分页数据 |

columns 配置项

API

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ------ | ------------------------------------------------------------------------------------ | ------ | ------ | ----------------------- | | prop | 对应列内容的字段名 | String | - | - | | label | 显示的标题 | String | - | - | | slot | 插槽名称 | String | - | - | | type | 类型,默认普通表格列，可选只依次为 序号，多选框，操作列，实现方式如示例 所示 | String | - | index,selection, option | | option | 集合element-plus 文档配置 | Object | - |

type 类型

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | --------- | -------------------------------- | ------ | ------ | ------ | | index | 序号 | String | - | - | | selection | 多选框 | String | - | - | | option | 定义为操作列，操作列具体参数如下 | String | - | - |

当 column 的 type 为 option 时 API 配置项如下

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | --------------------------------------------------------------------------------------- | --------------- | ----------- | ---------------- | --- | | text | 操作列显示的文字 | String | - | - | | type | 操作列类型，默认为文字 | String | - | dropdown confirm | | dropdown | 当 type 为 dropdown 时，下拉菜单的配置项 详情见dropdown 配置 | Array | - | - | | confirm | 当 type 为 confirm 时，确认框的配置项 详情见 confirm 配置 | Object | - | - | | disabled | 当 type 为 confirm 时，是否禁用操作列 | Function | return true | false | - | | options | 各个类型下的 element 组件 属性集合 element-plus 文档 | | - | - | | events | 各个类型下 element 组件 事件集合 element-plus 文档 | Array | - | - |

dropdown 配置项

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ------- | -------------------------------------------------------------------------------------------------------- | -------- | ------ | ------ | | text | 下拉菜单显示的文字 | String | - | - | | click | 点击下拉菜单的回调 | Function | - | - | | command | 下拉菜单的指令 | String | - | - | | options | element 下拉菜单的其他配置项 element-plus 文档 | | - | - |

示例

<basic-table
  :border="false"
  :columns="columns"
  :tableEvents="tableEvents"
  :data="tableData"
  :pagination="pagination"
>
  <template #content>
    <span>自定义内容</span>
  </template>
</basic-table>

const columns = ref([
  {
    type: "selection",
  },
  {
    label: "标题",
    prop: "title",
  },
  {
    label: "类型",
    prop: "type",
    option: {
      formatter: (row) => {
        return "formatter";
      },
    },
  },
  {
    label: "内容",
    prop: "content",
    slot: "content",
  },
  {
    type: "option",
    minWidth: "86",
    items: [
      {
        text: "编辑",
        icon: "vc-icon vc-icon-table-check",
        click: (row) => {},
      },
      {
        text: "删除",
        icon: "vc-icon vc-icon-table-check",
        click: (row) => {},
      },
    ],
  },
]);