# `<TableV2 />`

组件继承了 element-plustable 所有属性, 并扩展了更多属性

<TableV2 ref="tableRef" :enable-latest-data="false">
    <template #untts="scope"> 无 type 插槽测试</template>
    <template #zd1="{row}"> 插槽 1</template>
    <template #zd4-1="{row}">插槽 2</template>
    <template #zd4-1-1="{row}"> 插槽 4-1-1</template>

    <template #form-untts="scope"> 无type插槽测试</template>
    <template #form-tts="scope"> 表单插槽</template>
    <template #form-zd1="scope">
    	<el-input v-if="scope.row" v-model="scope.row.zd1"></el-input>
    </template>
    <template #form-zd4-1-1="scope"> 表单插槽4-1-1</template>
    <template #form-zd4-2="scope"> 表单插槽2</template>
    <template #form-zd6="scope"> 表单插槽3</template>

</TableV2>

<script setup>
const columns = [
  {
    prop: "tts",
    label: "测试",
    type: "datetime"
  },
  {
    prop: "bt",
    label: "表头",
    children: [
      {
        prop: "zd1",
        label: "字段1",
        type: "text",
        formItemProps: {
          rules: [
            {
              validator: fn
            }
          ]
        }
      }
    ]
  }
]
</script>

# 属性

属性名	描述说明	类型	默认
v-model/modelValue	表格数据	Array	[]
row-key	每行的 key 值，如果不提供，将使用索引 index 代替	String/Number	'id'
auto-load	是否自动请求数据.(url 不为空的情况)	Boolean	true
empty-text	没有数据时的文字描述	String	暂无数据
columns	表格配置(详情见 columns 配置)	Array	-
form-rules	表格内置表单校验规则(同 element-plus from rule)	Array	-
form-label-width	表格内置表单校 label 宽度	String/Number	'80px'
form-column-count	表格内置表单列展示数量	Number	1
url	列表请求接口	String	-
method	请求类型, 使用内置请求的获取列表的时候	String	'GET'
req-data	列表请求参数	Object	-
req-params	列表请求参数	Object	-
headers	请求头配置	Object	-
default-table-data	列表初始默认数据.(不建议当作外部请求参数更新列表)	Array	-
buttons	列表操作栏自定义按钮	Array	-
pagination	分页数据(用于序号循环), { page:1, size:10, total:0 }	Object	{total: 0, size: 10, page: 1}
auto-height	表格高度根据数据自适应, 若无数据且为 false 默认 200	Boolean	false
height	列表高度	String/Number	0
disabled	禁用列表	Boolean	false
last-column-align	最后一列对齐方式	String	'center'
scrollbar-always	是否永久显示滚动条	Boolean	false
dialog-full-screen	表格内置表单是否全屏(新增、编辑)	Boolean	false
enable-request-params-load	参数修改时是否发起请求	Boolen	true
enable-own-button	是否启用全部自带按钮, 新增, 编辑, 删除, 优先级高于 enableCreate, enableEdit, enableDelete	Boolean	true
enable-toolbar	是否启用表格上方 Toolbar	Boolean	true
enable-delete	是否启用内置删除按钮	Boolean	true
enable-create	是否启用内置新增按钮	Boolean	true
enable-edit	是否启用内置编辑按钮	Boolean	true
enable-selection	是否启用复选框	Boolean	false
enable-index	是否启用序号	Boolean	true
enable-row-edit	是否启用行编辑	Boolean	false
enable-single-edit	是否启用单行编辑	Boolean	true
enable-latest-data	是否在内置编辑时获取最新数据	Boolean	true
latest-data-url	获取最新数据接口地址	String	-
latest-data-method	获取最新数据接口方法	String	'GET'
latest-data-params	获取最新数据接口参数	Object	-
latest-data-data	获取最新数据接口数据	Object	-
latest-data-headers	获取最新数据接口头	Object	-
create-hide-colunms	新增时需要隐藏字段的 Key	Array	-
update-hide-colunms	编辑时需要隐藏字段的 Key	Array	-
number-text	序号表头文字	String	'序号'
create-text	内置新增按钮文字	String	'新增'
edit-text	内置编辑按钮文字	String	'编辑'
delete-text	内置删除按钮文字	String	'删除'
create-icon	内置新增按钮图标	String	'Create'
edit-icon	内置编辑按钮图标	String	'Edit'
delete-icon	内置删除按钮图标	String	'Delete'
show-button-icon	是否显示按钮图标	Boolean	false
selectable	是否启用点击选择行	Function	() => true
stripe	是否启用表格条纹	Boolean	true
loading	是否处于 loading 状态	Boolean	false
status	表格状态, none 或 edit, 配合 enable-row-edit 使用	String	none

# 列配置项属性

属性	描述说明	类型
prop	字段名	String
label	显示名	String
type	字段类型(同表单类型)	String
tableShow	是否在列表显示	Boolean
formShow	是否在内置表单显示	Boolean
align	表头水平位置	String
fixed	列是否固定	Boolean
width	列宽度	Number
sortable	是否排序	Boolean
expand	是否展开列	Boolean
tooltip	是否显示 tooltip	Boolean
children	多表头子级字段, Array (配置相同)	Array
formItemProps	表单项的 props(同 element plus form item), 启用行编辑时校验回调, 必须调用 callback(valid, msg)	Function(value, callback)

# 表格操作列按钮属性

属性	描述说明	类型
label	按钮显示文字	String
show	显示隐藏按钮	String
disabled	禁用按钮	String
important	强制显示按钮	Boolean
popconfirm	气泡提示内容(若不为空默认启用气泡)	String
icon	显示在文字前图标(仅框架已有图标库)	String
more	是否以更多形式显示按钮	Boolean
...	可自定义其他属性做点击判断, 如:type、code	Any

# 提示： show 和 disabled 自带行数据, 可根据行数据属性判断, 如: show: 'row.status === 1'

# 表格事件

事件	描述说明	类型
before-complete	表格数据请求回来在设置到列表之前, 诺调整了数据则需要手动调用 next(data) 方法并将新数据传进来	Function({items,next})
completed	表格数据设置完成后, 返回请求类型(get、put、post、delete)	Function(type)
before-create	新增数据之前	Function(data)
created	新增数据完成之后	Function(data)
before-update	数据更新之前	Function(data)
updated	数据更新之后	Function(data)
before-delete	数据删除之前	Function(data)
deleted	数据删除之后	Function(data)
beforeRowEdit	行编辑启用之前	Function(row, column, event)
click-row	当某一行被点击时会触发该事件	Function(row, column, event)
click-button	当自定义按钮被点击时会触发该事件	Function({row, btn, index})
selectionChange	当选中项改变时	Function(val)
editChange	当行编辑项改变时	Function(val, cells, row, column)
sortChange	当列排序时	Function(val)
form-reset	当使用默认新增/编辑表单点击重置按钮时会触发该事件	-
form-clear	当使用默认新增/编辑表单点击清空按钮时会触发该事件	-
form-changed	当使用默认新增/编辑表单时改变表单值会触发该事件	Function({value, item, tableFormRef, row})
form-before-submit	当使用默认新增/编辑表单时点击提交按钮提交数据前会触发该事件	Function(form)
form-before-edit	当使用默认编辑表单时在渲染数据到表单之前会触发该事件	Function(data, row)
dialog-open	内置弹框(新增、编辑)打开时	Function(form)
dialog-opened	内置弹框(新增、编辑)打开时动画结束	-
dialog-close	内置弹框(新增、编辑)关闭时	-
dialog-closed	内置弹框(新增、编辑)关闭动画结束	-

# 表格方法

方法	描述说明	类型
clear	清空列表	Function()
cancelEdit	取消所有行编辑	Function()
disabled	禁用表格功能	Function(Boolean)
reload	重新加载表格数据	Function()
create	新增数据	Function(data)
update	更新数据	Function(data)
remove	删除数据(根据 key 删除对应 val 的数据)	Function(val, key='__id')
push	向表格列表添加数据, key 默认__id, isReplace 在 data 为 Array 时默认替换整个列表数据	Function (data, key, isReplace)
getElTableRef	获取 element-plus el-table ref	Function() => Ref
getTotal	获取表格数据总数(后端返回总数,不是列表数量)	Function() => Number
getUpdateRow	获取当前正在内置编辑的行数据	Function() => Object
getTableData	获取列表数据	Function() => Array
getFormData	获取内置表单数据	Function() => Object
getFormValue	根据 Key 获取内置表单 Value	Function(String) => Any
getSelectionRows	获取表格复选勾选数据	Function() => Array
clearSelection	清空选中项	Function()
toggleRowSelection	切换行选中状态	Function(row, bool)
toggleAllSelection	切换全选状态	Function()
setRowValue	设置某行某字段的值	Function(id,prop, val)
setFormValue	设置内置表单值	Function(key,value)
setFormAttr	设置内置表单配置项的属性和值	Function(key, attr, value)
visibleFormDialog	显示/隐藏内置弹框(新增、编辑)	Function(Boolean, data)

# 表格插槽

插槽	描述说明
toolbarBegin	toolbar 开始的地方
toolbarLeft	toolbar 左侧默认按钮之后
toolbarCenter	toolbar 中间
toolbarRight	toolbar 右侧
header-[slot]	表头插槽
[slot]	动态字段插槽, 匹配属性 columns 项的 prop
edit-[slot]	行编辑时字段插槽
edit-[slot]-error	行编辑时校验错误显示插槽
buttons	操作按钮(内置按钮之后)

# 表格表单插槽

插槽	描述说明
dialogForm	内置表单插槽(可替换整个 form)
form-[slot]	内置表单动态插槽, 匹配属性 columns 项的 prop
formButtons	内置表单按钮插槽

← <Pagination />