# Table 表格

使用数据配置项列表快速生成一个表格

## 基础用法

创建一个基础表格，配置项支持<a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a>

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

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
      ],
      list: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄', sortable: true },
        { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
        { key: 'position', label: '职务' },
      ]
    }
  },
}
</script>
```

:::

## 自定义列

在使用`list`的同时，也支持**表格列具名插槽**及**表格列值具名插槽**，以满足不同的业务需求

::: snippet 在组件内部通过具名插槽的方式，替换对应内容，**表格列具名插槽**格式为`key`，返回值为对应配置项所有参数；**表格列值具名插槽**格式为`value-key`，返回值为row、value、column、index及对应配置项所有参数。

```html
<template>
  <eagle-table :value="tableData" :list="list">
    <template #value-age="{ value }">
      <el-tag :type="value > 40 ? 'danger' : 'primary'">{{ value }}</el-tag>
    </template>
    <template #position>
      <el-table-column prop="position" label="职务" min-width="200">
        <el-tag type="success" slot-scope="{ row }">{{ row.position }}</el-tag>
      </el-table-column>
    </template>
  </eagle-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
      ],
      list: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄', sortable: true },
        { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
        { key: 'position', label: '职务' },
        // { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
      ]
    }
  },
}
</script>
```

:::

## 首尾追加列

一般情况下，会存在一些特殊的列必然位于首列或尾列，这时可以设置追加列，通常配合Scheme组件使用

::: snippet 在表格中，可以使用**追加列具名插槽**进行表格列的追加，插槽有：尾列追加插槽`$append`、末尾插槽`$end`以及组件默认插槽被认为是首列追加插槽。

```html
<template>
  <eagle-table :value="tableData" :list="list">
    <el-table-column slot="$end" prop="operation" label="操作">
      <el-button type="text">删除</el-button>
    </el-table-column>
    <el-table-column type="selection" min-width="40"></el-table-column>
    <el-table-column prop="troopCode" label="部队编码"></el-table-column>
    <el-table-column slot="$append" prop="file" label="附件"></el-table-column>
  </eagle-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长', file: '履历' },
        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
      ],
      list: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
      ]
    }
  },
}
</script>
```

:::

## 动态列

在特殊业务需求下，对于表格列的显示隐藏会有一些动态需求

::: snippet 在表格列数据配置`list`属性中，使用`visible`作为列显示和隐藏的判断条件，支持**Boolean**和**Function**类型

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '李云龙', age: 42, troop: '独立团' },
        { name: '赵刚', age: 30, troop: '独立团', position: '政委' },
      ],
      list: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
        { key: 'troop', label: '部队番号', visible: false },
        { key: 'position', label: '职务', visible: (tableData) => tableData.filter(d => d.position).length > 0 },
        { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
      ]
    }
  },
}
</script>
```

:::

## API

## Attribute 属性

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

## Methods 方法

可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用<a href="https://element.eleme.cn/#/zh-CN/component/table#table-methods" target="_blank">el-table</a>的所有方法

## List 表单项配置列表

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

参数|说明|类型|可选值|默认值
-|-|-|-|-
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true
其它参数 | <a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a> | Any | - | -