# scgyl_ui

> try to use packaged way to updata

Latest version **0.0.1** (published 2022-05-11) · 0 weekly downloads

## Install

```sh
npm install scgyl_ui
pnpm add scgyl_ui
yarn add scgyl_ui
bun add scgyl_ui
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-05-11 |
| First published | 2022-05-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 23.7 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | ZhangHeng |
| Maintainers | tlzh1994 |

## Links

- npm: https://www.npmjs.com/package/scgyl_ui
- npm.io page: https://npm.io/package/scgyl_ui

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.16.1
- [xe-utils](https://npm.io/package/xe-utils.md) ^3.3.1
- [vxe-table](https://npm.io/package/vxe-table.md) ^3.3.15
- [view-design](https://npm.io/package/view-design.md) ^4.6.1
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.3
- [babel-helper-vue-jsx-merge-props](https://npm.io/package/babel-helper-vue-jsx-merge-props.md) ^2.0.3

## Recent versions

- 0.0.1 (latest) — 2022-05-11

## README

## filtertable组件说明
### 组件地址：
  [filter_table_saic](https://www.npmjs.com/package/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参数，修复了在使用中切换页面不关闭筛选框的问题

---
_Source: https://npm.io/package/scgyl_ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._