easy-table-vue2 v0.0.1

列表组件 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

gridOptions.grid.columns Attributes

Events

Methods

Slot

特别注意

多选问题

# 增加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"
  }