vue-manage-system

# 表格

# 介绍

表格是对 element 表格组件的二次封装，并且包括了查询、分页、查看详情、添加/编辑/删除等常用功能。

  • /src/components/table-custom.vue: 表格组件
  • /src/components/table-edit.vue: 添加/编辑表单
  • /src/components/table-detail.vue: 查看详情组件
  • /src/components/table-search.vue: 查询组件

# table-custom.vue props

属性 说明 必传 类型 默认值
tableData 表格数据 是 array -
columns 表格列数据 是 array -
rowKey 行数据的 Key 否 string 'id'
hasToolbar 是否显示表格右上方的工具栏 否 boolean true
hasPagination 是否显示分页导航 否 boolean true
total 分页导航的总数 否 number 0
currentPage 分页导航的当前页 否 number 1
pageSize 分页条数 否 number 10
layout 分页的布局 否 string -
delFunc 删除函数，点击删除按钮时触发 否 Function -
viewFunc 查看函数，点击查看按钮时触发 否 Function 0
editFunc 编辑函数，点击编辑按钮时触发 否 Function 0

# table-edit.vue props

属性 说明 必传 类型 默认值
options 配置 是 FormOption -
formData 表格行数据 是 Object -
edit 是否编辑操作 否 boolean false
update 更新函数，点击保存按钮时触发 否 Function -

# FormOption

属性 说明 必传 类型 默认值
list 表单配置项 是 FormOptionList[] -
labelWidth label 宽度 否 string -
span col 分栏 否 string 24

# FormOptionList

属性 说明 必传 类型 默认值
label 标签 是 string -
prop 字段 是 string -
type 类型 是 string -
placeholdler 占位符 否 string -
disabled 是否禁用 否 boolean false
required 是否必填 否 boolean false
opts type 为 select 时，选项列表 否 any[] -
format type 为 date 时，时间格式 否 Function -
activeValue type 为 switch 时，选中值 否 any -
inactiveValue type 为 switch 时，未选中值 否 any -
activeText type 为 switch 时，选中文本 否 string -
inactiveText type 为 switch 时，未选中文本 否 string -

# table-search.vue props

属性 说明 必传 类型 默认值
query 查询表单数据 是 Object -
options 表单配置 是 FormOptionList[] -
search 查询函数，点击查询按钮时触发 否 Function -

← 图标 →