hatech-web-component-table-page

表格页面组件

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

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

---

使用说明

安装

  npm install hatech-web-component-table-page

初始化

  // 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
    }
  }

使用示例

  <hatech-table-page :config="config" :data="data" @onEvent="onEvent"></hatech-table-page>

  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	初始版本开发