# 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>
  <el-form size="mini">
    <el-row>
      <el-col :span="18">
        <z-table :value="tableData" type="editable" border :columns="columns"></z-table>
      </el-col>
      <el-col :span="6" style="padding-left: 10px">
        <pre class="demo-model">{{ tableData }}</pre>
      </el-col>
    </el-row>
  </el-form>
</template>

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

:::