# simpleGroupChildTable 表格

# simpleGroupChildTable 概述

主要用于展示具有主子表关系的结构化数据和有层级关系的数据，不支持编辑

TIP

注意：该组件是高定制化组件，用于展示具有主子表关系的结构化数据，只做数据展示使用；本表格仅支持基本场景的表格功能（详见官网文档），复杂业务场景及影响性能的场景不支持。使用前请做好充足的调研。

# simpleGroupChildTable 代码示例

# 基础用法

simpleGroupChildTable的最基本的用法。

	#	名称	发布日	运行时间

To the moon

2002-11-22

Hollow Knight

2000-12-25

One Shot

1999-11-24

NieR

2001-11-20

<template>
  <div>
    <h-simple-group-child-table
      :columns="columns1"
      :childColumns="childColumns"
      :data="data1"
      :highlight-row="true"
    ></h-simple-group-child-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns1: [
       {
          type: 'index',
          align: 'center',
          // fixed:'left',
          width: 100
        },
       {
          title: '名称',
          key: 'name',
          width: 100,
          ellipsis:true,
          type: 'text'
        },
        {
          title: '发布日',
          key: 'release',
          width: 100,
          ellipsis:true,
        },
        {
          title: '运行时间',
          key: 'runtime',
          width: 100,
          ellipsis:true,
        },
      ],
      childColumns: [
        {
          type: 'index',
          align: 'center',
          // fixed:'left',
          width: 100
        },
       {
          title: '名称',
          key: 'name',
          width: 100,
          ellipsis:true,
          type: 'text'
        },
        {
          title: '发布日',
          key: 'release',
          width: 100,
          ellipsis:true,
        },
        {
          title: '运行时间',
          key: 'runtime',
          width: 100,
          ellipsis:true,
        },
      ], 
       data1:[
         {
            name: "To the moon",
            release: "2002-11-22",
            runtime: 70,
            item: [
              {
                 name: "To the moon",
                 release: "2002-11-22",
                 runtime: 70,
            }
            ]
          },
          {
            name: "Hollow Knight",
            release: "2000-12-25",
            runtime: 95,
             item: [
               {
                 name: "To the moon",
                 release: "2002-11-22",
                 runtime: 70,
               },
              {
                 name: "Hollow Knight",
                 release: "2000-12-25",
                 runtime: 95,
               },
             ]
          },
          {
            name: "One Shot",
            release: "1999-11-24",
            runtime: 92,
            item: [ {
            name: "To the moon",
            release: "2002-11-22",
            runtime: 70,
          },
          {
            name: "Hollow Knight",
            release: "2000-12-25",
            runtime: 80,
          },
          {
            name: "One Shot",
            release: "1999-11-24",
            runtime: 60,
          },]
          },
          {
            name: "NieR",
            release: "2001-11-20",
            runtime: 92,
            item: []
          },
      ],
    };
  },
};
</script>

# Scroll滚动

@on-scroll:表格内纵向滚动条滚动时触发，返回当前纵向滚动条距离底部的距离。

	#	名称	发布日	运行时间

To the moon

2002-11-22

Hollow Knight

2000-12-25

One Shot

1999-11-24

NieR

2001-11-20

<template>
  <div>
    <h-simple-group-child-table
      :columns="columns1"
      :childColumns="childColumns"
      :data="data1"
      :disabled-hover="true"
      :highlight-row="true"
      @on-scroll="scrolltest"
    ></h-simple-group-child-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: false,
      defaultFocusIndex1: null,
      columns1: [
       {
          type: 'index',
          align: 'center',
          // fixed:'left',
          width: 100
        },
       {
          title: '名称',
          key: 'name',
          width: 100,
          ellipsis:true,
          type: 'text'
        },
        {
          title: '发布日',
          key: 'release',
          width: 100,
          ellipsis:true,
        },
        {
          title: '运行时间',
          key: 'runtime',
          width: 100,
          ellipsis:true,
        },
      ],
      childColumns: [
        {
          type: 'index',
          align: 'center',
          // fixed:'left',
          width: 100
        },
       {
          title: '名称',
          key: 'name',
          width: 100,
          ellipsis:true,
          type: 'text'
        },
        {
          title: '发布日',
          key: 'release',
          width: 100,
          ellipsis:true,
        },
        {
          title: '运行时间',
          key: 'runtime',
          width: 100,
          ellipsis:true,
        },
      ], 
       data1:[
         {
            name: "To the moon",
            release: "2002-11-22",
            runtime: 70,
            item: [
              {
                 name: "To the moon",
                 release: "2002-11-22",
                 runtime: 70,
            }
            ]
          },
          {
            name: "Hollow Knight",
            release: "2000-12-25",
            runtime: 95,
             item: [
               {
                 name: "To the moon",
                 release: "2002-11-22",
                 runtime: 70,
               },
              {
                 name: "Hollow Knight",
                 release: "2000-12-25",
                 runtime: 95,
               },
             ]
          },
          {
            name: "One Shot",
            release: "1999-11-24",
            runtime: 92,
            item: [ {
            name: "To the moon",
            release: "2002-11-22",
            runtime: 70,
          },
          {
            name: "Hollow Knight",
            release: "2000-12-25",
            runtime: 80,
          },
          {
            name: "One Shot",
            release: "1999-11-24",
            runtime: 60,
          },]
          },
          {
            name: "NieR",
            release: "2001-11-20",
            runtime: 92,
            item: []
          },
      ],
    };
  },
   methods: {
      scrolltest(t) {
        console.log(t)
      },
    },
};
</script>

复制代码

# simpleGroupChildTable API

# simpleGroupChildTable props

属性	说明	类型	默认值
data	显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。	Array	[]
columns	表格列的配置描述，具体项见后文	Array	[]
childColumns	子表格列的配置描述	Array	[]
width	表格宽度，单位 px	Number \| String	自动
height	表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number \| String	-
border	是否显示纵向边框	Boolean	false
highlight-row	是否支持选中的行，即单选	Boolean	false
row-class-name	行的 className 的回调方法，传入参数： `row`：当前行数据 `index`：当前行的索引	Function	-
no-data-text	数据为空时显示的提示内容	String	暂无数据
rowSelect	多选时是否支持行选中,(仅在type为selection即多选下使用)	Boolean	false
loading	表格是否加载中	Boolean	false
showTitle	开启后，鼠标悬浮将展示全部文本内容（只在开启 ellipsis 后有效）	Boolean	false
itemHeight	每列项的高度	Number	40

# simpleGroupChildTable events

事件名	说明	返回值
on-expand	展开或收起某一行时触发	返回当前行数据row和当前行状态status
on-select	在多选模式下有效，选中某一项时触发（rowSelect为true或者点击多选框时生效）	返回已选项数据selection和刚选择的项数据的row
on-select-cancel	在多选模式下有效，取消某一项时触发	返回已取消数据selection和刚取消的项数据的row
on-selection-change	行选中状态发生改变时触发	返回已选项数据selection和已选项数据索引集合selectInx
on-select-all	全选或取消全选时触发	返回已选项数据selection
on-current-change	开启 `highlight-row` 后有效，选中一行时触发	返回当前行的数据和上一次选择的数据
on-row-click	单击某一行时触发（不支持rowSelect属性）	当前行的数据和index
on-row-dblclick	双击某一行时触发（不支持rowSelect属性）	当前行的数据
on-scroll	表格内`纵向滚动条滚动时触发`;横向滚动不触发 on-scroll	返回第一个参数是当前纵向滚动条距离底部的距离（为 0 时表示滚动条已经滚动到最底部）；第二个参数为滚动方向（"x"代表水平滚动，"y"代表垂直滚动）

# simpleGroupChildTable slot

名称	说明
loading	加载中
nodata	暂无数据

# simpleGroupChildTable column

属性	说明	类型	默认值
type	列类型，可选值为 index、selection	String	-
title	列头显示文字	String	#
key	对应列内容的字段名（只允许字母、数字或字母数字与下划线、短横线的组合）	String	-
width	列宽	Number	-
minWidth	表格最小宽度，单位 px	Number \| String	--
align	对齐方式，可选值为 `left` 左对齐、 `right` 右对齐和 `center` 居中对齐	String	left
ellipsis	开启后，文本将不换行，超出部分显示为省略号	Boolean	false