yw-common-list

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

vxetable文档

👉 查看文档

运行项目

安装依赖

npm install

启动本地调试

npm run serve

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

npm run lib

说明

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

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

使用

在main.js中引入

import ywCommonList from 'yw-common-list'
// 将创建后的axios引入进来
import service from '@/utility/request'
Vue.use(ywCommonList, {
  // 将创建后的axios传入，就能通过本地的拦截器管理请求
  axios: service,
  // 0.6.6新增可选项，会覆盖列表中的pageSizes和pageSize
  listOptions: {
    pageSizes: [40, 50, 60, 70, 80, 90, 100],
    pageSize: 40,
  }
})

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.4新增 | | superQueryEnterSubmit | 高级查询是否支持回车提交 | Boolean | true | 0.6.5新增 |

slot自定义插槽

| 名称 | 说明 | |------------|----------| | buttons | 表格上方按钮区域 | | 列字段+Header | 列表头 | | 自定义列 | 数据列 |

参数说明

{row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex}

示例代码

列名：address，列表头部插槽名：addressName，列表数据插槽：address

<ya-wei-list>
  <template #addressHeader>
    地址头部
  </template>
  <template #address="{ row }">
    <span>{{ row.name }}</span>
  </template>
</ya-wei-list>

emit

| 方法名 | 说明 | 返回值 | 版本 | |----------------------|-----------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------| | 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 选中/取消 | {"records":[],"total":48,"pages":2,"hasMore":true,"pageNo":1,"superQuery":{},"isSuperQuery":false} | | | focusCustom | 高级查询自定义列的input的focus回调，目前仅用于自定义弹窗，并且弹窗中要有input的focus，否则会重复触发该事件 | 字段名 | 0.6.2新增 | | clearCustom | 高级查询自定义列的input的clear回调 | 字段名 | 0.6.2新增 | | superQueryReset | 高级查询重置回调 | | 0.6.3新增 | | listLoaderSuccess | 接口调用成功 | | 0.6.3新增 | | superQueryVisible | 高级查询打开关闭 | true、false | 0.6.5新增 | | superQuerySubmit | 高级查询提交 | 高级查询的表单数据 | 0.6.5新增 |

方法

| 事件名 | 说明 | 参数 | 版本 | |--------------------|---------------|----|----| | reload | 主动触发刷新列表 | | | | getCheckboxRecords | 获取checkbox选中值 | | |

接口代理：/yw-common-list

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": "右模糊",

[
  {
    "rule": "判断条件",
    "val": "参数值",
    "field": "参数名"
  },
  {
    "rule": "eq",
    "val": 123,
    "field": "id"
  }
]