内容组件 - IkContent

用于列表页面

props

props	类型	说明	默认值
loading	Boolean	表格loading	false
title	String	表格左上角标题	''
data	Array	表格数据	[]
showIndex	Boolean	是否显示列号	true
border	Boolean	表格是否显示边框	true
mrTop	Boolean	是否显示顶部间距	true
noPadding	Boolean	是否不显示表格间距	false
shadow	String as PropType<'always' | 'never' | 'hover'>	外层卡片的阴影配置	'never'
showPage	Boolean	是否使用默认分页	true
pageSizes	Array	每页显示个数选择器的选项设置	[10, 20, 30, 60, 90, 120]
page	Object as PropType< { total: number, page: number } >	分页配置	{\ total: 0, page: 1 }\

slot

slot	说明
left	外层卡片header左侧： 左上角内容
right	外层卡片header右侧： 右上角内容
tabs	表格上方插槽
tabsTable	插槽 表格内容 (el-table-column)
default	tabs和tabsTable插槽不使用时可使用该插槽 表格内容 (el-table-column)

事件

名称	说明
size-change	page-size 展示条数改变时触发
current-change	页码改变时触发

示例代码

<template>
  <!-- 示例 -->
  <IkContent
    key="projectModel"
    :data="depData"
    :page="page"
    row-key="id"
    :loading="loading"
    :show-index="true"
    :size="tableSize"
    :no-padding="true"
    @current-change="handCurrentChange"
    @size-change="handSizeChange"
  >
    <template #default>
      <el-table-column prop="code" label="出码ID" />
      <el-table-column prop="typeName" label="操作类型名称" />
      <el-table-column prop="createName" label="操作人姓名" />
      <el-table-column prop="createTime" label="操作时间" />
      <el-table-column prop="deviceName" label="信息名称" />
    </template>
  </IkContent>
</template>