2.0.39 • Published 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.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 | 初始版本开发 |