VTablePro 表格

何时使用

提示

本组件使用 ref 指令获取组件方法并且更新组件 必填valueId唯一ID 此组件序列号默认展示，序列号无法关闭，设置图标可以对列进行 置顶或显/隐操作

写ts需要类型时:

import { VTablePro } from "@nexacore/vantage";

const TableRef = ref<InstanceType<typeof VTablePro > | null>(null)

<template>
  <!-- value-id为请求数据体的唯一id如没有唯一id组件将无法正常工作 -->
  <v-table-pro ref="TableRef" value-id="id"></v-table-pro>
</template>
<script setUp lang="ts">
//需要先等待组件加载完毕才可以使用TableRef方法
// import { VTablePro } from "@nexacore/vantage";
// const TableRef = ref<InstanceType<typeof VTablePro> | null>(null)
</script>

column参数如下

<script setup lang="ts">
  // 定义列配置接口 column参数如下
  interface ColumnConfig {
    // 数据字段名
    prop?: string
    // 列标题
    label: string 
    // 列宽度
    width?: string | number 
    // 最小宽度
    minWidth?: number
    // 对齐方式
    align?: "left" | "center" | "right"
    // 特殊列类型
    type?: "selection" | "index" | "expand"
    // 格式化函数
    formatter?: (row: any, column: TableColumnCtx, cellValue: any, index: number) => VNode | string
    //废弃
    slots?: boolean
    // 嵌套表头
    children?: ColumnConfig[]
    //如果单元格是可以点击修改的
    cellClickModify?: boolean
    //是否必填
    required?: boolean 
    //校验方法
    requiredFun?: () => void
    //自定义警告校验
    requireText?: string
     //是否置顶
    fixed?: "left" | "right" | boolean
    //是否隐藏显示
    hidden?: boolean
    //排序按照 字符串 或整型 或 时间来排序
    sortType?: "string" | "number" | "data"
    //operation是否关闭当前列操作
    operation?: boolean
    //值集地址
    lovCode: string
    //值集key
    labelKey: string
    //值集value
    valueKey: string
    //是否属于vpage
    vPage?:boolean
    //是否有输入框 输入框类型 目前只有
    cellClickModifyType?:"select" | "input"
  }

    //带值集 或则默认输入框下拉框的 table
  // TableRef.value?.columnRef([
  //   {
  //     prop: "name",
  //     label: "值集下拉",
  //     lovCode: "/base/lov/getLov/automotivesteel.PACK_STATUS",
  //     labelKey: "value",
  //     valueKey: "meaning",
  //     cellClickModify:true,
  //     cellClickModifyType: "select",
  //     slots: true,
  //   },
  //   {
  //     prop: "select1",
  //     label: "无值集下拉",
  //     cellClickModifyType: "select",
  //     cellClickModify:true,
  //     List: [
  //       {
  //         value: "10",
  //         label: "我是1",
  //       },
  //       {
  //         value: "20",
  //         label: "我是2",
  //       },
  //     ],
  //     slots: true,
  //   },
  //   {
  //     prop: "age",
  //     cellClickModifyType: "input",
  //     cellClickModify:true,
  //     label: "普通下拉框",
  //   },
  // ]);
  
</script>

vtable的基础功能

vtable的序号列 头部为⚙️ 此为列：显/隐和左/右置顶。功能，无法隐藏无法关闭 serialNumber 序号方法会返回对列的操作后重新生成的colunm信息方便用户存储到数据库里 具体信息请打开控制台查看 也可以通过 TableRef.value?.serialNumber()方法在任意地方获取列信息。 通过#header_prop重写表头插槽比如姓名的prop是name 那么插槽就应该是 <template #header_name ></template> 即可重写插槽

前端分页

提示

组件会对返回来的每一条数据添加pagination 为true即可

注入 column 表头

注入 data 数组

测试默认铺满高度

合计功能

table配合分页功能

pagesizeUpdate 为分页变化后返回给用户新的分页数据 用户进行请求 请修改组件为v-model方便组件更改数据结构 v-model:page-size="start.pagesize" v-model:current="start.currentpage"

自定义表内容

仿el-table-column 如果需要自定义列请给那个列传入slots:true 开启此功能

点击展示输入框(带校验功能)

cellClickModify和slots功能互不干扰 但是点击当前内容体会默认切换到 cellClickModify_prop的插槽里， 仿el-table-column 如果需要自定义列请给那个列传入 requiredFun 方法可以根据当前行的所有数据发生变更进行校验详情看代码内容 requiredFun 方法返回 true为错误 显示提示语句 false为成功删除提示语句

虚拟滚动

虚拟滚动-延迟拖影优化

多选

虚拟滚动配合多选，必填valueId唯一ID，此多选默认不会清空选中数据需要用户手动进行清空

单选

虚拟滚动配合单选，必填valueId唯一ID，此单选默认不会清空选中数据需要用户手动进行清空

多表头

支持无限嵌套children序列 并且虚拟滚动等其他功能完美支持

合并行或列

TablePro 参数

####继承官网所有属性 el-table官网文档外网

插槽	说明	类型
valueId	必填，数据唯一ID	string
type	是否单选多选	checkBox｜radio
height	table高度不传的话默认铺满剩余高度	number
pagesize	是否显示分页	boolean
pagesizeUpdate	分页发生变化的监听	()=>{ return { currentPage: number; pageSize: number,total:number } }
tableLoading	控制是否加载	boolean
selected	获取选中的key和对应的选中数组	()=>{ return {selectKey:valueId[],selectObj:object[]} }
selectUpdate	外部控制选中需要传唯一ID数组 单选多选都可以传 单选只会拿数组下标为0的数据，valueId[]	(selectList:string[])=>void
interlacingColors	隔行变色颜色	string 传入颜色字符串
interlacingColorsDark	隔行变色颜色夜间模式	string 传入颜色字符串
hoverColorsRow	鼠标移入变色	string 传入颜色字符串
hoverColorsRowDark	鼠标移入变色夜间模式	string 传入颜色字符串
SelectedColors	选中变色	string 传入颜色字符串
SelectedColorsDark	选中变色夜间模式	string 传入颜色字符串
amounto	合计小记传入对象aggregate后端返回的合计信息，Notes是需要展示小计的列信息	{aggregate: {age: 500},Notes: ["age"]}

ref插槽

插槽	说明	类型
dataVerify	获取全部行修改后的data信息通过行标记 del(删除)initial(无操作)modify(修改)add(新增)	res.dataVerify
modify	返回原始数据 可以通过 ref.modify(id)标记当前行为前端修改行 id可以为'id'或[id,id,id]或res.selected()	(id)=>void
del	返回原始数据 可以通过 ref.modify(id)标记当前行为前端删除行 id可以为'id'或[id,id,id]或res.selected()	(id)=>void
dataIndex	返回原始数据 可以通过 ref.dataIndex(id)获取当前id对应的数据下标	(id)=>number
data	返回原始数据 可以通过 ref.data[0].name='修改' 或者console.log(ref.data)打印	ref(object)
rulesListFun	如果行可以修改可以通过此方法对当前行或者所有选中等数据进行必填校验	(str?: number
columnRef	如果只返回了 index并且值是数组那代表他是更新数据 否则如果attribute返回的是对象 代表根据index下标覆盖当前整行数据 否则如果attribute是字符串那么代表覆盖对象的那个值	(index: number
columnPush	末尾追加表头	object
columnSplice	针对表头原生的数组操作splice功能,splice 传参跟splice一致	(index: number, index2: number, str1: any, str2: any)
dataRef	如果只返回了 index并且值是数组那代表他是更新数据 否则如果attribute返回的是对象 代表根据index下标覆盖当前整行数据 否则如果attribute是字符串那么代表覆盖对象的那个值	(index: number
dataSplice	针对数据原生的数组操作splice功能,splice 传参跟splice一致	(index: number, index2: number, str1: any, str2: any)
dataPush	末尾追加内容dataPush追加的数据为虚拟数据将会强制删除valueId并且转换为虚拟ID	object 或[object,object]
tableLoading	控制是否加载	boolean
selected	获取选中的key和对应的选中数组	()=>{ return {selectKey:valueId[],selectObj:object[]} }
selectUpdate	外部控制选中需要传唯一ID数组，valueId[]	(selectList:string[])=>void
serialNumber	获取列信息column	()=>[{prop,label,hidden,fixed}]