# yw-common-list

基于vxe-table封装的自定义可配置表格

## vxetable文档

👉 [查看文档](https://vxetable.cn)  

## 运行项目

安装依赖

```shell
npm install
```

启动本地调试

```shell
npm run serve
```

编译打包，生成编译后的目录：lib

```shell
npm run lib
```

## 说明
表格不设置宽高时可以进行自适应，需要表格外层容器的高度为100%能够占满剩余区域
```vue

<template>
  <div class="page1">
    <ya-wei-list table-key="yw_student"/>
  </div>
</template>
<style lang="scss" scoped>
.page1 {
  height: 100%;
}
</style>
```

## API
| 属性                    | 说明                   | 类型      | 默认值                                                                                         | 版本      |
|-----------------------|----------------------|---------|---------------------------------------------------------------------------------------------|---------|
| tableKey              | 必填，表格配置key           | String  |                                                                                             |         |
| showTop               | 是否显示表格上方按钮区域         | Boolean | true                                                                                        |         |
| showTablePage         | 是否显示分页               | Boolean | true                                                                                        |         |
| defaultReload         | 初始化默认加载数据            | Boolean | false（如果为false通过reload的方法手动触发加载数据)                                                          |         |
| customPage            | 自定义分页参数              | Object  | { pageNo: options.pageNo,// 当前页 pageSize: options.pageSize,// 每页数据量 totalResult: 0// 列表总量 } |         |
| superParams           | 列表高级查询查询条件           | Array   | []                                                                                          |         |
| query                 | 查询条件，会被高级查询覆盖        | Object  | {}                                                                                          |         |
| superQueryAlone       | 高级查询选中与 query 独立     | Boolean | true                                                                                        |         |
| superQueryAloneParams | 高级查询选中与 query 独立的参数名 | Array   | ['id']                                                                                      |         |
| advancedPopupData     | 高级查询页面自定义显示用的数据      | Object  | { user_custom_name: "表单字段显示用", user: "高级查询传参用" }                                            | 0.6.2新增 |
| vxe-table的所有attrs     |                      |         |                                                                                             | 0.6.3新增 |

## slot自定义插槽
| 名称         | 说明       |
|------------|----------|
| buttons    | 表格上方按钮区域 |
| 列字段+Header | 列表头      |
| 自定义列       | 数据列      |
### 参数说明
`{row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex}`
### 示例代码
#### 列名：address，列表头部插槽名：addressName，列表数据插槽：address
```html
<ya-wei-list>
  <template #addressHeader>
    地址头部
  </template>
  <template #address="{ row }">
    <span>{{ row.name }}</span>
  </template>
</ya-wei-list>
```
## 方法
| 方法名                                   | 说明                     | 返回值                                                                                                                                        | 版本      |
|---------------------------------------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|
| header-cell-click | 表头单元格点击                | { $rowIndex, column, columnIndex, $columnIndex, triggerResizable, triggerSort, triggerFilter, $event }                                     |         |
| header-cell-dblclick | 表头单元格双击                | { $rowIndex, column, columnIndex, $columnIndex, $event }                                                                                   |         |
| header-cell-menu | 右键列                    | { type, column, columnIndex, $event }                                                                                                      |         |
| cell-click | 单元格点击                  | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event } |         |
| cell-dblclick | 单元格双击                  | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }                                                                    |         |
| cell-mouseenter | 鼠标进入单元格                | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }                                                                    |         |
| cell-mouseleave | 鼠标离开单元格                | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }                                                                    |         |
| cell-menu | 右键行                    | { type, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }                                                              |         |
| scroll | 滚动                     | { type, scrollTop, scrollLeft, scrollHeight, scrollWidth, bodyWidth, bodyHeight, isX, isY, $event }                                        |         |
| checkbox-all | checkbox 全选/全取消        | { checked, $event }                                                                                                                        |         |
| checkbox-change | checkbox 选中/取消         | { checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }                                                           |         |
| focusCustom | 高级查询自定义列的input的focus回调 | 字段名                                                                                                                                        | 0.6.2新增 |
| clearCustom | 高级查询自定义列的input的clear回调 | 字段名                                                                                                                                        | 0.6.2新增 |
| superQueryReset | 高级查询重置回调               |                                                                                                                                         | 0.6.3新增 |
| this.$refs.列表key.reload()             | 主动触发刷新列表               |
| this.$refs.列表key.getCheckboxRecords() | 获取checkbox选中值          | 选中的数据对象                                                                                                                                    |         |

## 接口代理：/yw-common-list
```js
module.exports = {
  devServer: {
    proxy: {
      // 代理通用列表后台地址
      '/yw-common-list': {
        target: 'http://localhost:8983/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/yw-common-list': ''
        }
      }
    }
  },
  ...
}
```

### 高级查询参数
#### rule参数说明
"gt": "大于",
"ge": "大于等于",
"lt": "小于",
"le": "小于等于",
"eq": "等于",
"ne": "不等于",
"in": "包含",
"like": "全模糊",
"left_like": "左模糊",
"right_like": "右模糊",
```json
[
  {
    "rule": "判断条件",
    "val": "参数值",
    "field": "参数名"
  },
  {
    "rule": "eq",
    "val": 123,
    "field": "id"
  }
]
```