❤
npm
Sign UpSign In

easy-table-vue2

0.0.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i easy-table-vue2

Weekly Downloads

0

Version

0.0.1

License

none

Unpacked Size

731 kB

Total Files

6

Last publish

Collaborators

  • yuhaihang
Try on RunKit
Report malware