filter_table_saic v0.2.89
filter_table_saic 组件说明
组件地址:
组件依赖
为满足需求组件中使用了下列的开源的组件库,包括
- "vxe-table": "^3.3.10"
- "view-design": "^4.5.0"
组件引用
npm install filter_table_saic
//如遇不兼容问题可以在后面加入参数--legacy-peer-deps
npm i filter_table_saic --legacy-peer-deps
组件开始
import saicfilter from 'filter_table_saic'
import 'filter_table_saic/lib/filter_table_saic.css'
Vue.use(saicfilter,{ i18n: (key, value) => i18n.t(key, value) })
多语言
//local/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
//因组件引入iview基础组件,固多语言时候需要额外引入view-design的语言包,如果项目中已经有iview的语言包不需要额外引入
import enUsLocale from 'view-design/dist/locale/en-US';
import zhCnLocale from 'view-design/dist/locale/zh-CN';
import filteren from "filter_table_saic/package/local/lang/en-US"
import filterzn from "filter_table_saic/package/local/lang/zh-CN"
Vue.use(VueI18n)
Vue.locale = () => { }
const messages = {
"zh-CN": {
...zhCnLocale,
...filterzn
}, // 中文语言包
"en-US": {
...enUsLocale,
...filteren
} //英文语言包
const i18n = new VueI18n({
locale: "zh-CN",
messages
})
};
//main.js
import i18n from '@/locale'
import saicfilter from 'filter_table_saic'
import 'filter_table_saic/lib/filter_table_saic.css'
Vue.use(saicfilter,{ i18n: (key, value) => i18n.t(key, value) })
new Vue({
render: h => h(App),
i18n
}).$mount('#app')
传参说明:
- tablecalumn:[]
- 表格的列数据,对象数组格式,示例:
{
title: "Name",
key: "name",
filterable: true,
showintable: false
}
- title:"列标题"
- width:列宽度
- key:"列标示,展示数据的字段名",
- filterable:本列是否启用筛选
- showintable: 初始化时是否在页面显示
- slot:自定义列样式的 slot 属性值
- treenode:true 设置此参数为 true 的行会出现展开树结构的按钮,不可同 slot 同时使用
- resizable:是否允许拖拽调整宽度
- minWidth:最小列宽度;会自动将剩余空间按比例分配
- fixed:left(固定左侧), right(固定右侧)
- sortable:true/false,单列排序功能,需要使用全局配置 closefilter=true 才生效
说明:组件内的显示隐藏列排序等操作不会影响外部列数据
tabledata:[] 表格行数据 属性值与 tablecalumn 中的 key 值对应
- showcount:boolean,默认为 true,是否显示左上角的数据量统计
- tableheight:Number 必填,确定表格高度,如不传会导致表格溢出显示异常等问题
- selectAllAble:boolean 用于是否显示全选按钮
- checkline:boolean 用于是否显示选择框,true 时会显示多选框
- checkMethod:function 用于判断某一行的 checkboxs 是否可选,参数 row:行数据 返回:boolean true 可选 false 不可选
- checkedKey:String 用于标识选中字段的标识,适用于选中状态以字段形式存在于字段中的情况,设置此字段为选中状态字段 key 值的字符串即可
<saicfilter :checkMethod="checkMethod">
</saicfilter>
<script>
checkMethod ({ row }) {
console.log(row)
return false
}
</script>
- visibleMethod:function 用于判断某一行的 checkboxs 是否显示,参数 row:行数据 返回:boolean true 显示 false 不显示
<saicfilter :visibleMethod="visibleMethod">
</saicfilter>
<script>
visibleMethod ({ row }) {
console.log(row)
return false
}
</script>
- lheight:number 虚拟滚动时的统一行高
- gn:number 超过设定行数开始使用虚拟滚动,默认 100
- gw:number 超过设定列数开始使用虚拟滚动
- 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 提示),不需要可不选
closefilter:boolean,是否关闭整个表格的筛选功能,优先度高于 tablecalumn 内的筛选开关 -hidelayout:boolean,默认false,是否隐藏布局按钮,hidelayout为true时隐藏
treeConfig:Object 树形结构设置,需配置 treenode 后可以正常使用,可配置参数如下:
- expandAll:Boolean,默认为 false, 在 lazy 为 false 时可用,用于初次渲染时是否展开所有可展开项
- expandRowKeys:Array,在 lazy 为 false 时可用,设置默认展开节点
- lazy:Bollean,默认为 false, 是否启用懒加载
- transform:Bollean,默认为 true, 自动将列表转为树结构
- rowField:String,用于 tree-config.transform,树节点的字段名
- parentField:String,用于标识父节点
- hasChild:String, 是否有子节点的 key 值,当数据中有此项定义名称的数据时会展示展开树结构按钮
- loadMethod:function,获取子节点数据方法,当设置懒加载 lazy 为 true 时才可使用,示例:
loadChildrenMethod ({ row }) { // 异步加载子节点 return new Promise(resolve => { setTimeout(() => { const childs = [ { RN: row.RN + 100000, parentId: row.RN, name: row.name + 'Test45', type: 'mp4', size: null, date: '2021-10-03', hasChild: true }, { RN: row.RN + 150000, parentId: row.RN, name: row.name + 'Test56', type: 'mp3', size: null, date: '2021-07-09', hasChild: false } ] resolve(childs) }, 500) }) },
组件事件:
- select-all: 全选触发,返回值是选中项组成的数组
- select-one: 单选时触发,返回值分别是选中项组成的数组和选中行的行数据 data,rwo;
- scroll: 表格滚动时触发,返回如下数据
- columnChanged:在变更列宽、排序、是否隐藏时会触发,返回数组格式列数据
{
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 }
- getCheckboxRecords:获取表格已经选中的数据
- clearActived:清除整个表格的编辑激活状态
- clearSort:清空sortable字段产生的单列排序
组件示例
获取本项目后安装并运行,可以直接在浏览器中查看示例
npm i
npm run serve
特殊传参与使用方法
- keepfilter:Boolean,控制数据更新后筛选是否要保存
- 配套事件:rekeep 在需要为数据进行更新切需要保留筛选条件时,先设置keepfilter为true,然后进行数据更新,数据更新完成后会触发rekeep事件,在rekeep事件中将keepfilter设置为false
rekeep () {
this.keepfilter = false
},
changedata (scope) {
this.keepfilter = true
console.log(scope.scope)
let words = scope.scope.row.feature + '1'
let count = this.waitdata.findIndex(it => it.nunmbers == scope.scope.row.nunmbers)
this.$set(this.waitdata[count], 'feature', words)
},
特别注意:!!!!!必须在rekeep中设置keepfilter为false,否则可能出现死循环!若提前设置则可能导致数据无法更新
增加后端控制
本模块内容需要对应后端接口,功能用于保存列的改变,仅限开发者所处团队内部使用,外部使用可使用 columnChanged 事件获取列的变化
使用方法
- 在 main.js 中使用组件时,增加 baseurl 参数,如下
import saicfilter form 'filter_table_saic'
import 'filter_table_saic/lib/filter_table_saic.css'
Vue.use(saicfilter,{baseurl:''})
//baseurl参数需要写到后端接口/common/路径的前一级
- 在存储过程中,组件会从 localStorage 中获取用户名作为标识,故需要在项目登陆中存储一次用户的唯一标识,且需要在调用组件前,如下:
localStorage.setItem('userAccount',xxx)
- 存储的过程中,组件会获取页面路由作为标识,所以请尽量不要用 "/"这样的路径,
- 当同一路由页面存在多个表格的时候,可以为表格增加 pageTbIdx 参数用于存储列,同一页面不可一致,
<saicfilter :pageTbIdx='xxx'></saicfilter>
- 由于列的保存依赖与列配置的 "key"参数,故而使用本功能时每一列 key 不应为空,否则将无法保存
- 当在 use 方法中加入 baseurl 配置后,本功能将自动开启
MIT
- v0.2.89:增加clearSort方法,用于清空sortable产生的单列筛选
- v0.2.86:由于 0.81-0.85 的修改产生了重大 bug,此版本功能回退至 0.2.80 版本,并且修复了部分情况下 gn 参数未能正常生效的问题
- v0.2.85:增加 checkedKey 配套的获取选中方法 getCheckboxRecords
- v0.2.81:增加 checkedKey 参数用于处理选中
- v0.2.71:增加保存列改动功能,具体参照上文 增加后端控制;增加了 gw 参数赋予虚拟滚动列的能力
- v0.2.59:增加事件 columnChanged,在变更列宽、排序、是否隐藏时会触发,可以用于存储变更
- v0.2.58:增加 checkMethod 和 visibleMethod 来控制选择功能的显示与禁用
- v0.2.57:增加新配置项以控制数据量显示
- v0.2.56:增加非懒加载树形表格功能,增加了选择框固定在列表左侧的默认设置
- v0.2.54:增加树形表格功能
- v0.2.53:增加在关闭筛选后的单独排序功能,补充文档中固定列宽度的参数
- v0.2.52:增加一处全局配置来关闭筛选功能
- v0.2.51:补充一处未进行多语言化内容
- v0.2.50:多语言版本基本完成
- v0.2.44:多语言测试版本,请勿直接拉取使用
- v0.2.43:增加 selectAllAble 参数
- 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 参数,修复了在使用中切换页面不关闭筛选框的问题
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago