# Table 表格

拓展ElementUI的`el-table`

## 基础用法

基本参数与ElementUI的`el-table`相同。

::: snippet 支持来自表单的`size`继承

```html
<template>
  <el-form size="mini">
    <z-table :data="tableData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </z-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: '31', gender: '男' },
        { name: '李四', age: '27', gender: '女' },
        { name: '王五', age: '16', gender: '男' },
      ],
    };
  },
}
</script>
```

:::

## 可编辑表格

一般用于表格的静态数据编辑

::: snippet 设置type为`editable`开启可编辑模式

```html
<template>
  <z-table v-model="tableData" type="editable" border :columns="columns">
    <template #editor-gender="{ value, onInput }">
      <el-radio-group size="mini" :value="value" @input="onInput">
        <el-radio-button label="男">男</el-radio-button>
        <el-radio-button label="女">女</el-radio-button>
      </el-radio-group>
    </template>
  </z-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 31, gender: '男', remark: '' },
        { name: '李四', age: 27, gender: '女', remark: '' },
        { name: '王五', age: 16, gender: '男', remark: '' },
      ],
      columns: [
        { prop: 'name', label: '姓名', editable: false },
        { type: 'el-input-number', prop: 'age', label: '年龄' },
        { prop: 'gender', label: '性别' },
        { prop: 'remark', label: '备注' },
      ]
    };
  },
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
data | 表格数据 | Array | - | -
value | 表格数据（支持v-model） | Array | - | []
columns | 表格列配置 | Array | - | []
type | 表格类型 | String | normal、editable | normal