0.0.1 • Published 2 years ago
scgyl_ui v0.0.1
filtertable组件说明
组件地址:
组件依赖
为满足需求组件中使用了下列的开源的组件库,包括
- "vxe-table": "^3.3.10"
- "view-design": "^4.5.0"
传参说明:
tablecalumn:[]
- 表格的列数据,对象数组格式,示例:
{ title: "Name", key: "name", filterable: true, showintable: false }
- title:"列标题"
- key:"列标示,展示数据的字段名",
- filterable:本列是否启用筛选
- showintable: 初始化时是否在页面显示
- slot:自定义列样式的slot属性值
- resizable:是否允许拖拽调整宽度
- minWidth:最小列宽度;会自动将剩余空间按比例分配
- fixed:left(固定左侧), right(固定右侧)
- 说明:组件内的显示隐藏列排序等操作不会影响外部列数据
tabledata:[] 表格行数据 属性值与tablecalumn中的key值对应
- tableheight:Number 必填,确定表格高度,如不传会导致表格溢出显示异常等问题
- checkline:boolean用于是否显示选择框,true时会显示多选框
- lheight:number 虚拟滚动时的统一行高
- gn:number 超过设定行数开始使用虚拟滚动,默认100
- samefield:String 设定合并单元格的简易字段,设置需要相同和并的字段的key值
- loading:boolean用于处理表格自带的加载中动画,为true显示,为false时不显示
- lighthover:boolean用于附加鼠标移动到行上高亮的效果
- lighclick:boolean用于附加鼠标点击行时高亮的效果
- autoResize:boolean,表格是否自适应大小变化,默认为false
- tableallresizable:boolean,为true时讲为表格中的所有列增加可拖拽宽度
- slot 可以通过添加template的方式自定义列内容展示,示例如下
- scope.scope中包含表格数据
- column 列数据
- columnIndex 第多少列
- row 行数据
- rowIndex 第多少行
<template slot="lock_time" slot-scope="scope"> <div>{{scope.scope.row.name}}</div> </template>
- mergeCells:合并的单元格,示例如下
[ { row: 4, col: 2, rowspan: 2, colspan: 5 }, { row: 30, col: 3, rowspan: 10, colspan: 1 }, { row: 80, col: 4, rowspan: 30, colspan: 3 } ]
- edit-config:可编辑配置项,示例如下:
{ trigger: 'click', mode: 'cell', showIcon: false, activeMethod: (row, rowIndex, column, columnIndex) => { console.log(row, rowIndex, column, columnIndex) return true } }
- triggerstring:触发方式 可选项:manual(手动触发方式,只能用于 mode=row),click(点击触发编辑),dblclick(双击触发编辑)
- enabledboolean是否启用
- modestring编辑模式 可选项: cell(单元格编辑模式),row(行编辑模式)
- showIconboolean是否显示列头编辑图标 推荐false
- autoClearboolean当点击非编辑列之后,是否自动清除单元格的激活状态
- activeMethod:该方法的返回值用来决定该单元格是否允许编辑({ row, rowIndex, column, columnIndex }) => boolean
- iconstring自定义可编辑列的状态图标
- overflowShow:超出部分显示方式,可选项:ellipsis(只显示省略号),tooltip(并且显示为 tooltip 提示),不需要可不选
组件事件:
- select-all: 全选触发,返回值是选中项组成的数组
- select-one: 单选时触发,返回值分别是选中项组成的数组和选中行的行数据data,rwo;
- scroll: 表格滚动时触发,返回如下数据
{
isX: false,//是否为横向滚动
isY: true,//是否Wie纵向股弄懂
scrollLeft: 0,//横向偏移距离
scrollTop: 249855//纵向偏移距离
}
- scrollbottom: 表格滚动到底部时触发,由于虚拟滚动,使用此方法必须设置lheight属性,否则不生效
- rowclicked: 单击表格行时触发
- editClosed 可编辑表格关闭激活状态时触发
- editActived 可编辑表格编辑状态激活时触发
- datafinashed 组件完成渲染后触发
组件方法
toggleRowSelection:用于表格多选,切换某些行的选中状态。obj如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)rows 格式: { row: row, selected: true || false }
clearActived:清除整个表格的编辑激活状态
组件示例
获取本项目后安装并运行,可以直接在浏览器中查看示例
npm i
npm run serve
MIT
- v0.2.42:增加minWidth参数
- v0.2.41:修正gn为0出现异常的情况
- v0.2.36:补充空数据的筛选
- v0.2.36:更换数据绑定方式,优化性能
- v0.2.35:修复部分情况下筛选异常的bug
- v0.2.34:调整checkline多选列居中
- v0.2.33:增加便捷参数:tableallresizable
- v0.2.29:针对筛选功能和samefield合并单元格的升级,新增了slot自定义模板的筛选和合并单元格功能,注意事项:1、使用此功能时,slot、数据key值或samefield值需相等。2、筛选功能显示的数据为原始数据
- v0.2.28:增加补充了点击和鼠标移入后的组件的处理方式和事件
- v0.2.27:增加clearActived方法
- v0.2.26:补充overflowShow参数
- v0.2.25:修复fixed状态下可能会出现多个筛选框的问题
- v0.2.24:补充autoResize参数,用于处理宽度变化时不自动适应宽度的问题
- v0.2.23:修复samefield字段会忽视最后一段合并单元格的问题
- v0.2.21:修复samefield字段在虚拟滚动情况下显示异常的问题
- v0.2.20:修复下拉选框样式缺失导致的功能异常问题
- v0.2.19:调整可编辑单元格默认高度为行高
- v0.2.18:增加编辑单元格功能,目前仅为初版,会在后续补充更完善的编辑功能
- v0.2.13:增加scroll、scrollbottom方法、补充点击其他区域关闭的功能
- v0.2.12:修复列布局调整框显示异常的问题,补充了筛选框再次点击收起的功能
- v0.2.11:新增合并单元格简易方法,samefield;修复了自定义筛选存在的部分bug。
- v0.2.7:修复全选时显示异常的问题;修复了清楚筛选器时全选按钮没有清空的问题
- v0.2.5:补充lheight和gn参数,修复了在使用中切换页面不关闭筛选框的问题
0.0.1
2 years ago