列表组件 easyTable

用于后台开发列表页的列表页分页集成，基于 elementUI 的二次封装

版本更新日志

v0.1.14 1.更新设置pagesize不生效问题

v0.1.13 修复 头部全选框导致的抖动问题

v0.1.12 修复 operates 熟悉下 list 数组中 show 功能问题

v0.1.8

1. 增加了多选记忆功能以及其他属性和elementUI保持一致；
2. 处理了多选选中触发多次事件的问题（由于兼容elementUI导致的bug，已修复；
3. 增加了elementUI中Table-column Attributes；
4. 筛选表头展示内容showColumnConfig默认为不展示；

引入 easyTable

特别注意: 需要自行引入vue和element-ui（element-ui可按需引入）

在 main.js 中写入以下内容：

import easyTable from "easyTable"

Vue.use(easyTable)

全局配置

在引入 easyTable 时，可以传入一个全局配置对象。该对象目前支持 dataFormat 与 total 字段。

dataFormat 是接口返回的数据格式，要求格式为'a.b.c'，相当于后台返回的数据为 a:{b:{c:[]}} ,c 中是要展示的数组，可不填，默认取接口返回的 result 下的 data 字段;

total 是接口返回的数据总数，要求格式为'a.b.c'，相当于后台返回的数据为 a:{b:{c:1024}} ,c 中是要展示的总数，可不填，默认取接口返回数据的 result 下 total 字段。

具体操作如下：

import easyTable from "vue-easyTable"

Vue.use(easyTable,{ dataFormat:'result.data',total:'result.total' })

页面引用

<easyTable ref="searchResultList"  :options="gridOptions" :serviceInstanceScreen="serviceInstanceScreen"></easyTable>

options 为表格参数设置

筛选项配置（非必填）

# serviceInstanceScreen
  <el-form @keyup.enter.native="doRefresh()">
      <el-form-item>
        <el-input style="width:300px"
                  prefix-icon="el-icon-search"
                  @keyup.enter.native="doRefresh()"
                  v-model="serviceInstanceScreen.searchKey"
                  placeholder="请输入内容"
                  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="doRefresh()" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>

# 重新请求的方法
doRefresh () {
    this.$refs.searchResultList.refresh();
},

options 配置

# 基本设置
gridOptions: {
    dataSource: {
        serviceInstance: api.businessTableList, //后台请求地址或者直接是数据
    },
    grid: {
        mutiSelect: true,//多选，默认为false
        operates: { // 列操作按钮
            width: 200,
            list: [
                {
                type: "danger", //和elementUI一致
                show: true,
                label: "删除",
                method: this.doDelete //方法，带两个参数（key, row）
                },
                {
                type: "text",
                show: true,
                label: "详情",
                method: this.show
                }
            ]
        },
        //数据列
        columns: [
            {
            prop: "goods_id",
            columnKey: "goods_id",
            labelFormatter:this.labelFormatter
        },
        {
            prop: "on_sale",
            columnKey: "on_sale",
            label: "状态",
            sortable: true,
        }
        ]
    }
    }

api文件中如下：
const api = {
    businessTableList: data => http.get(API_PREFIX + "/api/table-list", data)
}

Attributes

| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 |

| ----------------------- | ------------ | ----------------- | ------------------------------ | -------- | ----------------------------- | ----------- | | serviceInstanceScreen | Object | null | 筛选项配置 | 否 | | | gridOptions | Object | {} | 表格设置 | 是 | | | gridOptions.dataSource | Object | {} | 数据相关 | 是 | | | gridOptions.dataSource.serviceInstance | String/Array | null | 后台请求地址或者直接是数据 | 是 | | | gridOptions.dataSource.loadDataOnFirst | Boolean | true | 第一次要不要直接请求数据（存在获取筛选条件后请求数据的情况，设置为 false） | 否 | | | gridOptions.grid | Object | {} | 表格设置 | 是 | | | gridOptions.grid.mutiSelect | Boolean | false | 是否需要多选（详见下方 特别注意） | 是 | | | gridOptions.grid.selectionOptions | Object | {} | 多选时的参数，如 reserveSelection、selectable（详见下方 特别注意） | 是 | | | gridOptions.grid.operates | Object | {} | 列操作按钮 （具体属性见下方） | 否 | | | gridOptions.grid.pagination | Object | {} | 覆盖原有页面设置 | 否 | 页数，可选择下拉数 | | gridOptions.grid.pagination.pageSize | Number | 10 | 页数 | 否 | | | gridOptions.grid.pagination.pageSizes | Array | [10, 20, 50, 100] | 可选择下拉数 | 否 | | | gridOptions.grid.pagination.showSizes | Boolean | true | 是否展示调整每页显示条数下拉框 | 否 | | | gridOptions.grid.columns | Array | [] | 数据展示列（具体属性见下方） | 是 | | defaultSort | | gridOptions.grid.defaultSort | Object | {} | 默认排序展示 | 否 | 默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 | | gridOptions.grid.defaultSort.prop | String | {} | | 否 | | | gridOptions.grid.defaultSort.order | String | {} | 顺序 | 否 | ascending, descending | | gridOptions.grid.pageable | Boolean | true | 是否分页 | 否 | | | gridOptions.grid.maxHeight | Number | | 表格最大高度 | 否 | | | gridOptions.grid.customColumnDataHeader | Boolean | false | 支持表格自定义数据（插槽 具体详情见下方 slot） | 否 | | | gridOptions.grid.treeable | Boolean | false | 表格树（详见下方 特别注意） | 否 | | | gridOptions.grid.showColumnConfig | Boolean | false | 筛选表头展示内容 | 否 | | | gridOptions.grid.showIndex | Boolean | false | 是否展示行号 | 否 | | | gridOptions.grid.formatter | Function | | 展示数据格式化 | 否 | 参数：row, column, cellValue--return 的可以是 html 代码 | | gridOptions.grid.filters | Array | [] | 开启某一列的筛选 | 否 | | | gridOptions.grid.showLoading | Boolean | [] | 是否展示 loading | 是 | | | gridOptions.grid.loadingOptions | Object | loading | loading 的配置详情请参考 elementUI-loading | 否 | 如果想使用原生可以直接使其为{} | | gridOptions.grid.xxx | - | - | 所有 ElementUI 中 table 组件能用到的属性都可以 | - | 例如：（详见下方 特别注意） |

gridOptions.grid.operates Attributes

| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 | | ------------- | ---------------- | ------- | --------------------------------------------- | -------- | ------------------------------------- | | width | Number | auto | 操作列宽度 | 否 | | | list | Array | [] | 操作列的按钮 | 否 | | | list.type | String | | 按钮类型，和 elementUI 一致 | 否 | primary / success / warning / danger / info / text | | list.isLink | Boolean | | 是不是 a 链接（如果是 true，method 必须是 return 链接的 href） | 否 | primary / success / warning / danger / info | | list.show | Boolean/Function | | 依据某些条件展示这个按钮，可以是函数 | 否 | 带两个参数（key, row） | | list.disabled | Boolean/Function | | 依据某些条件禁用这个按钮，可以是函数 | 否 | 带两个参数（key, row） | | list.label | String | | 按钮名字 | 是 | | | list.method | Function | | 点击执行的方法 | 是 | 带两个参数（key, row） | | list.fixed | Boolean | | 是否固定（left,right） | 否 | | | list.icon | String | | 按钮图标 | 否 | | | list.plain | Boolean | | 是否朴素按钮 | 否 | | | list.style | String | | 操作按钮的行内样式 | 否 | | | list.render | String | | 按钮的一些特殊展示 | 否 | 参数（key, row） | | direction | String | left | 操作为 popover 时,弹框的方向 | 否 | | | icon | String | | popover 时,显示的图标 | 否 | | | type | String | popover | 操作按钮显示成弹出框格式 | 否 | |

gridOptions.grid.columns Attributes

| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 | | -------------- | ---------------------------------------------------- | ------------------------------- | ------------------------------------------ | -------- | ---- | | prop | String | | 展示后台返回的字段 | 是 | | | columnKey | String | | key | 是 | | | label | String | | 表头的名字 | 是 | | | labelFormatter | Function | | 表头的名字（可执行方法） | 否 | | | sortable | Boolean | | 是否需要排序 | 否 | | | columnShow | Boolean | | 是否展示当前表头（筛选列表可展示出来） | 否 | | | visible | Boolean | | 当前这一列是否可见（可以通过某些条件判断） | 否 | | | render | Function | | 数据项的特殊展示（详见下方 特别注意） | 否 | | | width | Number | auto | 列宽度 | 否 | | | xxx-xxx | elementUI 中 Table-column 的所有 Attributes 均可使用 | 返回的数据（与 elementUI 相同） |

Events

| 事件名 | 说明 | 参数 | | ------------------- | ------------------------------------- | ---------------------------------- | | current-change-list | 列表选中触发事件 | 选中的数据 | | selection-change | 列表单选触发事件 | 选中的数据 | | data-change | 返回的数据改变触发事件 | 返回的数据（ data，total，result） | | xxx-xxx | elementUI 中 table 的所有事件均可使用 | 返回的数据（与 elementUI 相同） |

Methods

| name | 说明 | | | ----------- | ---------------------------------- | ---------------------------------------------------------------------- | | refresh | 重新请求数据 | | | exportCSV | 导出数据 | 参数可以是文件名 | | getTableRef | 获取 elementUI 的 table 组件的 ref | 可通过这样的方式调用 elementUI-table 组件的方法（详见下方 特别注意） |

Slot

| name | 说明 | | ---------------- | ------------------ | | columnDataHeader | 支持表格自定义数据 |

特别注意

多选问题

# 增加selection-change
<easyTable ref="searchResultList" @selection-change="handleSelectionChange" :options="gridOptions" :serviceInstanceScreen="serviceInstanceScreen"></easyTable>
# 可通过在data中加入变量
selectedRows: []
# 比如用作批量删除操作
<el-button icon="el-icon-delete" type="danger" @click="doBatchDelete()" :disabled="selectedRows.length <= 0" >批量删除</el-button>
doBatchDelete() {
    let _t = this;
    if (!_t.selectedRows || _t.selectedRows.length == 0) {...}
    let ids = _t .selectedRows.map(function(row) {
        return row.id;
    });
    ...
 }
# 方法
handleSelectionChange(val) {
    this.selectedRows = val;
},
# 属性
selectionOptions:{
    reserveSelection:true, //数据更新之后保留之前选中的数据（需指定 row-key）
    selectable:function(row,index){
        return xxx
    }
}

gridOptions.grid.columns

# 参考
render: (h, params) => {
    return h('el-tag', {
        props: {
        type: params.row.required === true ? 'success' : 'info'
        } // 组件的props
    }, params.row.required === true ? '是' : '否')
}

兼容 ElementUI 的 Table Attributes

# 参考
gridOptions: {
    grid: {
        showHeader:false,
        'show-summary':true, //或驼峰写法showSummary:true
    }
}

直接调用 ElementUI 的 table 组件的方法

# 参考
this.$refs.searchResultList.getTableRef().sort('real_price','ascending')

表格树

# 参考属性
  tree: {
    treeKey: "id",
    parentKey: "parentId",
    levelKey: "level",
    childKey: "items"
  },
  treeColumn: {
    label: "名称",
    prop: "name",
    width: "150px",
    minWidth: "150px",
    treeKey: "id",
    parentKey: "parentId",
    levelKey: "level",
    childKey: "items"
  }