# 说明

HtTable 自定义表单组件,基于el-table实现;
Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

新增
<template>
  <div>
    <ht-table 
    ref="tableList" 
    ref-table="tableList" 
    :table-init="true" 
    :table-head="tableHeadList" 
    :table-data="tableData" 
    @row-click="handleRowClick"
    >
      <ht-button @click="handleSave">新增</ht-button>
    </ht-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
       tableHeadList: [
        {
          label: '用户账号',
          prop: 'u@account',
          align: 'right',
          query: true
        },
        {
          label: '用户姓名',
          prop: 'u@userName',
          query: true
        },
        {
          type: 'tag',
          label: '部门',
          prop: 'd@dname',
          query: true
        },
        {
          label: '工号',
          prop: 'u@userSn'

        },
        {
          label: '岗位',
          prop: 'u@postStation'
        },
        {
          label: '出生日期',
          prop: 'birthDate'
        },
        {
          label: '性别',
          prop: 'u@sex',
          type: 'dic',
          dicType: 'xb'
        },
        {
          label: '手机号码',
          prop: 'u.mobile',
          align: 'right'
        },
        {
          label: '邮箱地址',
          prop: 'u@email'
        },
        {
          label: '用户类型',
          prop: 'u@userType'
        },
        {
          label: '用户级别',
          prop: 'u@userLevel'
        },
        {
          label: '状态',
          prop: 'u@status',
          render: (scope) => {
            return (
              <ht-switch
                value={scope.row.status.c}
                key={scope.column.columnKey}
                // disabled='true'
                onChange={(newStatus, preVal) => this.testRefer(newStatus, preVal, scope)}
              >
              </ht-switch>
            );
          }
        }
      ],
      tableData:{}
    }
  },
  methods:{
    handleSave(){
      alert('save');
    },
    handleEdit(){
      alert('edit');
    },
     handleRowClick(row, column, event) {
      alert('row-click');
    },
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
Expand Copy

# API

# Table Attributes

参数 说明 类型 可选值 默认值
ref-table 设置table的ref属性 String
table-head 设置table的表头 Array
table-type 设置表格类型,
list类型表头不带筛选
String import / detail / list
table-data 设置table的内容 Object,Array
visible 设置是否可见 Boolean true / false true
table-sort 设置排序组件是否可见 Boolean true / false true
is-show-page 设置分页组件是否可见 Boolean true / false true
multi 设置多选表格 Boolean true / false false
height 设置table的高度 Number,String
max-height 设置table的最大高度 Number,String 384
page-size 设置table的每页大小 Number,String 10
layout 设置table的分页插件布局 String total, sizes, prev, pager, next, jumper
table-fetch 设置table的查询方法(render方式table有效) Function
row-class-name 设置行样式方法 | Function
row-style 设置行样式方法 | Function
cell-style 设置单元格样式方法 | Function
before-import 设置导入前置方法 | Function
table-filter 表格查询的过滤条件 | Object
table-cb 表格加载完成后的回调方法 | Function
table-init 表格初始化渲染方法 | Function

# Table Slots

name 说明
import 列表导入按钮插槽
export 列表导出按钮插槽

# Table Events

方法名 说明 参数
row-dblclick 行双击事件 (row, column, event)
row-click 行单击事件 (row, column, event)
selection-change | 多选行选中事件 (selection)

# Table-Column Attributes

参数 说明 类型 可选值 默认值
type 设置table的column列类型 String text / action / dic / tag text
prop 设置table的column对应字段属性 String
label 设置table的column名字 String
fixed 设置table的column是否是固定锁定 String left / right / true
width 设置table的column列宽度 Number
minWidth 设置table的column列最小宽度 Number 135
align 设置table的column列对齐方式 String left / right left
formatter 设置table的column列格式化方法 Function
dicType 设置table的column列字典类型 String
filtercode 设置table的column列字典类型过滤 String
showLabel 设置table的column列字典类型默认显示值 String
dicRemote 设置table的column列字典类型表选 Function
isreload 设置table的列字典类型是否重新加载 Boolean true,false false
cb 设置table的column列字典类型选中回到函数 Function
multiple 设置table的列字典类型是否多选 Boolean true,false false
dateType 设置table的column列日期类型 String date / datetime date
query 设置table的column列是否可搜索 Boolean true,false false
render 设置table的column列内容渲染方法 Function
content 设置table的操作列定义 Array
action 设置table的操作列响应方法 Array
edit 设置table的column是否可编辑 Boolean true,false false
format 设置table的编辑列格式 Array
cellBlur 设置table的编辑列失去焦点方法 Function
cellEnter 设置table的编辑列回车事件方法 Function
hidden 设置table的列是否隐藏 Boolean true,false false
selectable 返回值用来决定这一行是否可以勾选 Function
min 设置行编辑的number框最小值 Number
max 设置行编辑的number框最大值 Number

# 版本

  • v1.6.5