# Table 表格

不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置

## 基础用法

表格列可以通过`list`动态配置

:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同

```html
<template>
  <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
      ],
      tableList: [
        { key: 'name', label: '名称',
          formatter(row, column) {
            return `${row.name} - ${row.postcode}`;
          }
        },
        { key: 'address', label: '住址' },
        { key: 'postcode', label: '邮编' },
        { key: 'number', label: '楼栋号', minWidth: '180' },
      ]
    }
  },
  mounted() {
    console.log(this.$refs.table.instance);
  },
  methods: {
    handleSubmit(value) {
      console.log(value)
    },
    handleCancel() {
      this.$refs.form.reset()
      console.log('cancel!')
    }
  }
}
</script>
```

:::

## 自定义列

表格列可以通过`slot`动态配置，名称对应各列的列名

:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式

```html
<template>
  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column type="index" width="50"></el-table-column>
    <template #postcode="{ label, key }">
      <el-table-column prop="postcode" label="家属院" min-width="200">
        <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来  -->
          <span style="color: orange">{{ $index }}</span>
          <span style="color: blue">{{ label }}</span>
          <span style="color: red">{{ key }}</span>
          <span>{{ number }}</span>
          <span>{{ postcode }}</span>
        </template>
      </el-table-column>
    </template>
  </eagle-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
      ],
      tableProps: {
        border: true
      },
      tableList: [
        { key: 'name', label: '名称',
          formatter(row, column) {
            return `${row.name} - ${row.postcode}`;
          }
        },
        { key: 'address', label: '住址' },
        { key: 'postcode', label: '邮编' },
        { key: 'number', label: '楼栋号', minWidth: '180' },
      ]
    }
  },
  mounted() {
    console.log(this.$refs.table.instance);
  },
  methods: {
    handleSubmit(value) {
      console.log(value)
    },
    handleCancel() {
      this.$refs.form.reset()
      console.log('cancel!')
    }
  }
}
</script>
```

:::


## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
list | 表单项配置列表 | Array | - | []
tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
tableEvents | ElementUI表格事件 | Object | - | {}

## List 表单项配置列表

配置方法与Form组件基本相同，有部分属性删减

参数|说明|类型|可选值|默认值
-|-|-|-|-
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
其它参数 | ElementUI表格项的属性 | Any | - | -