filter_table_saic

v0.2.102

Published

2 months ago

try to use packaged way to updata

0High
0Medium
0Low

tlzh1994

filter_table_saic 组件说明

重要说明：

本组件0.2.92/0.2.94/0.2.96及后续版本为特殊版本，由版本0.2.90版本改动而来，如需使用rowClassFunc和cellClassFunc字段，用于根据条件自定义行和单元格的样式，请使用0.2.91版本

  npm install [email protected]
  //如遇不兼容问题可以在后面加入参数--legacy-peer-deps
  npm i [email protected] --legacy-peer-deps

组件地址：

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) })
  //v0.2.102版本新增了一个filterSearchMode，用来配置布局部分是否是筛选
  Vue.use(saicfilter, {
  filterSearchMode: 'filter' // 设置全局默认为过滤模式
 })

多语言

//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 值的字符串即可
reloadtableself：boolean 是否手动控制数据更新，默认为false

<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
  }
}
```
- trigger[string]:触发方式可选项：manual（手动触发方式，只能用于 mode=row）,click（点击触发编辑）,dblclick（双击触发编辑）
- enabled[boolean]是否启用
- mode[string]编辑模式可选项： cell（单元格编辑模式）,row（行编辑模式）
- showIcon[boolean]是否显示列头编辑图标推荐 false
- autoClear[boolean]当点击非编辑列之后，是否自动清除单元格的激活状态
- activeMethod:该方法的返回值用来决定该单元格是否允许编辑({ row, rowIndex, column, columnIndex }) => boolean
- icon[string]自定义可编辑列的状态图标
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字段产生的单列排序
reloadTable:手动重载表格，

组件示例

获取本项目后安装并运行，可以直接在浏览器中查看示例

 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.102:新增了filterSearchMode属性
v0.2.100:修复了表格在溢出时没有正常显示省略号的问题
v0.2.99:增加手动控制表格重载的方法，以修复可编辑表格快速编辑时表格整个重载的问题
v0.2.92:修改一处保存逻辑，现在本地新增的列在当远端有存储时也会显示了
v0.2.90:增加regetsaved方法，用于手动获取已存储的列
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 参数，修复了在使用中切换页面不关闭筛选框的问题

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

filter_table_saic 组件说明

重要说明：

组件地址：

组件依赖

为满足需求组件中使用了下列的开源的组件库，包括

组件引用

组件开始

多语言

传参说明：

组件事件:

组件方法

组件示例

获取本项目后安装并运行，可以直接在浏览器中查看示例

特殊传参与使用方法

特别注意:!!!!!必须在rekeep中设置keepfilter为false，否则可能出现死循环！若提前设置则可能导致数据无法更新

增加后端控制

本模块内容需要对应后端接口，功能用于保存列的改变，仅限开发者所处团队内部使用，外部使用可使用 columnChanged 事件获取列的变化

使用方法

MIT