2.0.39 • Published 3 years ago

hatech-web-component-table-page v2.0.39

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

表格页面组件

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

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


使用说明

安装

  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.noAuthBoolean是否使用鉴权,true表示对于按钮不进行鉴权
page.apiObject接口配置
page.tableObject
page.table.hideBoolean是否隐藏,true表示隐藏
page.tableFormObject表格增删改查配置
page.searchObject搜索栏配置
page.search.hideBoolean
page.treeObject左侧树配置
page.tree.hideBoolean
page.treeFormObject树增删改查
page.paginationObject分页配置
page.pagination.hideBoolean

插槽

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

事件

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

方法

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

主题变量

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

依赖

依赖名版本
hatech-web-component0.0.8
hatech-web-component-form0.0.10
hatech-web-component-form-dialog0.0.8
hatech-web-component-icon0.0.2
hatech-web-component-pagination0.0.1
hatech-web-component-table0.0.8
hatech-web-component-tree0.0.1

作者/维护者

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