# a-common-list

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

## vxetable文档

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

## 运行项目

安装依赖

```shell
npm install
```

启动本地调试

```shell
npm run serve
```

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

```shell
npm run lib
```

## 接口代理：/common-list
```js
module.exports = {
  devServer: {
    proxy: {
      // 代理通用列表后台地址
      '/common-list': {
        target: 'http://localhost:8983/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/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"
  }
]
```
### 主动触发刷新列表
```html
this.$refs.列表key.reload()
```

### 获取checkbox选中值
```html
<!-- 返回值为选中的数据对象 -->
const list = this.$refs.列表key.getCheckboxRecords()
```


## 自定义插槽
### 参数说明
`{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 }`
####