# hatech-web-component-table-page

> 前端页面组件

Latest version **2.0.39** (published 2021-08-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install hatech-web-component-table-page
pnpm add hatech-web-component-table-page
yarn add hatech-web-component-table-page
bun add hatech-web-component-table-page
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.39 |
| Published | 2021-08-20 |
| First published | 2021-08-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 57 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wuhao |
| Maintainers | hatech20091106 |
| Keywords | table-page |

## Links

- npm: https://www.npmjs.com/package/hatech-web-component-table-page
- Repository: http://git.hatech.com.cn:8088/hatech-web/hatech-web-template-component
- npm.io page: https://npm.io/package/hatech-web-component-table-page

## Dependencies (8)

- [hatech-web-utils](https://npm.io/package/hatech-web-utils.md) ^0.1.3
- [hatech-web-component](https://npm.io/package/hatech-web-component.md) 0.0.8
- [hatech-web-component-form](https://npm.io/package/hatech-web-component-form.md) ^1.0.5
- [hatech-web-component-icon](https://npm.io/package/hatech-web-component-icon.md) 0.0.2
- [hatech-web-component-tree](https://npm.io/package/hatech-web-component-tree.md) 0.0.1
- [hatech-web-component-table](https://npm.io/package/hatech-web-component-table.md) 0.0.23
- [hatech-web-component-pagination](https://npm.io/package/hatech-web-component-pagination.md) 0.0.1
- [hatech-web-component-form-dialog](https://npm.io/package/hatech-web-component-form-dialog.md) ^1.0.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.39 (latest) — 2021-08-20

## README

# 表格页面组件

本组件提供页面组件功能，组件内包含左侧树、右侧表格，搜索栏等功能

通过集成通用组件功能，开成整个页面组件，方便直接使用

---
## 使用说明

### 安装

```sh
  npm install hatech-web-component-table-page
```

### 初始化

```js
  // main.js
  import Vue from 'vue'
  import HatechTablePage from 'hatech-web-component-table-page'
  Vue.use(HatechTablePage)
  // or
  // xxx.vue
  import { HatechTablePage } from 'hatech-web-component-table-page'
  export default {
    components: {
      HatechTablePage
    }
  }
```

### 使用示例

```html
  <hatech-table-page :config="config" :data="data" @onEvent="onEvent"></hatech-table-page>
```
```js
  export default {
    data() {
      return {
        data: [
          ...
        ],
        config: {
          ...
        }
      }
    },
    methods: {
      onEvent(args) {
        const { event, params } = args
        this[event] && this[event](params)
      }
    }
  }
```

### 参数

| 参数名               | 类型    | 描述                                    |
| -------------------- | ------- | --------------------------------------- |
| page.noAuth          | Boolean | 是否使用鉴权,true表示对于按钮不进行鉴权 |
| page.api             | Object  | 接口配置                                |
| page.table           | Object  |                                         |
| page.table.hide      | Boolean | 是否隐藏，true表示隐藏                  |
| page.tableForm       | Object  | 表格增删改查配置                        |
| page.search          | Object  | 搜索栏配置                              |
| page.search.hide     | Boolean |                                         |
| page.tree            | Object  | 左侧树配置                              |
| page.tree.hide       | Boolean |                                         |
| page.treeForm        | Object  | 树增删改查                              |
| page.pagination      | Object  | 分页配置                                |
| page.pagination.hide | Boolean |                                         |

### 插槽

| 名称        | 说明     |
| ----------- | -------- |
| page_top    | 组件头部 |
| page_bottom | 组件底部 |

### 事件

| 名称         | 说明             |
| ------------ | ---------------- |
| onEvent      | 事件统一处理     |
| onTableEvent | 表格事件统一处理 |
| onTreeEvent  | 树事件统一处理   |

### 方法

| 方法名       | 参数                 | 作用                   |
| ------------ | -------------------- | ---------------------- |
| getRef       | getRef(ref)          | 获取组件引用           |
| currFormData | currFormData(params) | 获取、设置当前表单数据 |


### 主题变量

| 变量名                       | 值类型 | 默认值 | 说明         |
| ---------------------------- | ------ | ------ | ------------ |
| --component-background-color | 颜色   | -      | 用于组件背景 |
| --component-box-shadow       | 颜色   | -      | 组件阴影     |
| --component-border-primary   | 颜色   | -      | 用于边框颜色 |

### 依赖

| 依赖名                           | 版本   |
| -------------------------------- | ------ |
| hatech-web-component             | 0.0.8  |
| hatech-web-component-form        | 0.0.10 |
| hatech-web-component-form-dialog | 0.0.8  |
| hatech-web-component-icon        | 0.0.2  |
| hatech-web-component-pagination  | 0.0.1  |
| hatech-web-component-table       | 0.0.8  |
| hatech-web-component-tree        | 0.0.1  |

---
## 作者/维护者

| 名称 | 联系方式              | 参与部分     |
| ---- | --------------------- | ------------ |
| 吴浩 | wuhaowh@hatech.com.cn | 初始版本开发 |

---
_Source: https://npm.io/package/hatech-web-component-table-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._