filtertable组件说明

组件地址：

filter_table_saic

组件依赖

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

• "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
    }
  }

  • 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 提示）,不需要可不选

组件事件:

• 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参数，修复了在使用中切换页面不关闭筛选框的问题