# z-table2

**Repository Path**: type-error/z-table2

## Basic Information

- **Project Name**: z-table2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-04-30
- **Last Updated**: 2024-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```html
<script>
  const tableData = [
    { name: 'zhangsan', age: 18 },
    { name: 'lisi', age: 20 },
    { name: 'wangwu', age: 35 },
  ];

  // $data = { row, raw, index,data }
  // $ref = { $ref }
  const handleExpand = ($data, $ref) => {};
</script>

<button>Add</button>
<z-table :data-source="tableData" @expand="handleExpand">
  <!-- row -->
  <template #default>
    <z-table-item prop="name" label="姓名" v-slot="scoped">
      <input type="text" v-model="scoped.name" />
    </z-table-item>

    <z-table-item prop="age" label="年龄" v-slot="scoped">
      <input type="text" v-model="scoped.age" />
    </z-table-item>
  </template>

  <!-- option buttons -->
  <tamplate #options>
    <button>add-item</button>
    <button>delete</button>
    <button>copy</button>
    <button>edit</button>
    <button>save</button>
    <button>审批</button>
  </tamplate>

  <template #expand>
    <!-- 内部table -->
  </template>
</z-table>

<!-- 展开行table -->
<z-expand-table>
  <!-- 行 -->
  <template #default>
    <z-table-item prop="name" label="姓名" v-slot="scoped">
      <input type="text" v-model="scoped.name" />
    </z-table-item>

    <z-table-item prop="age" label="年龄" v-slot="scoped">
      <input type="text" v-model="scoped.age" />
    </z-table-item>
  </template>

  <!-- 行底 -->
  <template #bottom>
    <div>
      <checkbox></checkbox>同意
      <radio>选项一</radio>
      <radio>选项二</radio>
    </div>
  </template>

  <!-- option buttons -->
  <template #options>
    <button>add</button>
    <button>delete</button>
    <button>copy</button>
    <button>edit</button>
    <button>save</button>
  </template>

  <!-- form action -->
  <template #footer>
    <button>确定</button>
    <button>删除</button>
  </template>
</z-expand-table>
```

---

| props     | 必填 | 类型           | 默认值                                 | 参数 |
| :-------- | :--- | :------------- | :------------------------------------- | :--- |
| labell    | 否   | string         | ''                                     |      |
| propl     | 否   | string         | ''                                     |      |
| extral    | 否   | boolean        | false                                  |      |
| width     | 否   | string\|number | '1fr'                                  |      |
| operation | 否   | boolean        | false                                  |      |
| buttons   | 否   | string[]       | ['add', 'del', 'edit', 'save', 'copy'] |      |
| add       | 否   | object         | defaultButton                          |      |
| del       | 否   | object         | defaultButton                          |      |
| edit      | 否   | object         | defaultButton                          |      |
| save      | 否   | object         | defaultButton                          |      |
| copy      | 否   | object         | defaultButton                          |      |

---

> defaultButton

| 属性  | 默认值    |
| ----- | --------- |
| type  | 'primary' |
| size  | 'small    |
| plain | false     |
| icon  | ''        |
| label | ''        |
| link  | false     |

---

> 三种状态下的table显示内容

| 状态\显示 | 原始内容 | 输入框 | 按钮 | 自定义行 |
| :-------- | :------- | :----- | :--- | :------- |
| view      | √        |        | √    | 禁用     |
| edit      |          | √      | √    | 可用     |
| solid     | √        |        |      | 禁用     |

---

> 三种状态下的操作栏按钮

| 按钮\状态 | edit | save | add | del | copy |
| :-------- | :--- | :--- | :-- | :-- | :--- |
| view      | √    |      | √   | √   | √    |
| edit      |      | √    | √   | √   | √    |
| solid     |      |      |     |     |      |