@wangankeji/eltable-wrapper v1.4.10

ElTableWrapper

此组件封装了 element-ui 中的 ElTable 和 ElPagination 组件，以提供表格与分页一体化的展示效果。

注: 后将此组件 ElTableWrapper 统称为 组件

组件支持多种分页方式，点此查看

组件支持单元格编辑，点此查看

原 @hyjiacan/eltable-wrapper

安装

npm install @wangankeji/eltable-wrapper

或

yarn add @wangankeji/eltable-wrapper

快速上手

main.js

import Vue from 'vue'
import ElTableWrapper from '@wangankeji/ElTableWrapper'
import '@wangankeji/eltable-wrapper/lib/eltable-wrapper.css'

// 设置组件的默认值
const defaults = {
  // ajax请求函数
  ajax: (e) => {
  },
  // ajax请求method
  method: 'get',
  // 每页显示的数据量
  size: 10,
  // 分页类型
  type: 'l'
}
Vue.use(ElTableWrapper, defaults)

<el-table-wrapper
    url="/path/to/url"
    :params="{p0: 1}"
    @ajax-error="onAjaxError"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="id"></el-table-column>
<el-table-column prop="name"></el-table-column>
</el-table-wrapper>
<script>
export default {
  methods: {
    onAjaxError(e) {
      console.error(e)
    }
  }
}
</script>

属性

可以通过以下方式指定组件属性的默认值:

import Vue from 'vue'
import ElTableWrapper from '@wangankeji/ElTableWrapper'

// 设置组件的默认值
const defaults = {
  // ajax请求函数
  ajax: (e) => {
  },
  // ajax请求method
  method: 'get',
  // 每页显示的数据量
  size: 10,
  // 分页类型
  type: 'l'
}
Vue.use(ElTableWrapper, defaults)

公共属性

• ElTable 的原生属性支持见 ElTable支持的属性
• ElTable 的原生事件支持见 ElTable支持的事件
• ElPagination 的原生属性支持见 ElPagination支持的属性

多层的id-field使用数组而不是字符串，是为了便于处理某些字段中包含特殊字符(甚至是.符号)的情形

id-field 为函数的情形：

某些情况下，数据的主键并不只是一个字段，而是多个字段组合形成。此时使用函数能够快速处理：

// 接收的参数为行数据对象
function idFieldGetter(row) {
  // 返回值会作为数据的标识
  return `${row.field1}_${row.field2}
}

check-field 示例:

<template>
  <el-table-wrapper check-field="isSelected" selection="multiple">
    <template v-slot="{row}">
      {{row.isSelected}}
    </template>
  </el-table-wrapper>
</template>

check-field 通常与 toggle-on-row-click 属性联合使用，以在不使用 checkbox（选择列）的时候用来标记行的选中状态。 为保证数据能正确响应，最好在数据加载到表格前就加上 check-field(即上例中的 _isSelected 属性 ) 字段。

AJAX属性

check-params 的第二个参数，仅在params改变时，自动重新请求时有效，其描述了参数的变化， 更多信息参考 deep-diff。 可以在check-params中通过判断changed的值，以阻止某些参数变化时自动重新加载

ajax-param-*

Since 1.2.0

用于向 AJAX 请求指定参数，这些参数会被 params 中相同属性的值覆盖。

如：

• :ajax-param-size="20" => {size: 20}
• ajax-param-type="normal" => {type: 'normal'}
• ajax-param-data-prop="xxxxx" => {data: {prop: 'xxxxx'}}

ajax-option

这通常是一个对象。用于传递给 ajax 函数，其格式如下：

ajax({
  option: {...}
})

上面代码中 option 就是 ajax-option 的值。

但有时候我们仅仅需要设置其中的一个或几个属性， 此时再写一个对象就显示繁琐了。于是，就支持了以下的简写：

<el-table-wrapper
    :ajax-option-foo="true"
    :ajax-option-bar="false"
    ajax-option-foobar-fool="ish"
></el-table-wrapper>

以上写法等价于

<el-table-wrapper
    :ajax-option="{
    foo: true,
    bar: false,
    foobar: {
      fool: 'ish'
    }
  }"></el-table-wrapper>

这两种写法可以同时存在，ajax-option-foo 这样的写法的值会覆盖 ajax-option 中指定的值。

多级对象 foobar.fool 支持 Since 1.2.0

分页特有属性

增量分页特有属性

服务器分页特有属性

本地分页特有属性

方法

info() 返回值:

const data = {
  // 页码
  pageIndex: Number,
  // 总页数
  pageCount: Number,
  // 每页的数据量
  pageSize: Number,
  // 总数据量
  dataSize: Number,
  // 选中数量
  selected: Number
}

remove/select/deselect 的参数说明:

• 数组 处理多行数据 参数: [{}, {}]
• 对象 处理单行数据 {}
• 字符串/数字 处理由 id-field 指定的行的标识值对应的单行数据 1/'913a0229-cd5e-45a4-a57a698f2432774f' since 0.7.3
• 字符串/数字(数组) 处理由 id-field 指定的行的标识值对应的多行数据 [1, 2, 3]/['913a0229-cd5e-45a4-a57a698f2432774f', ...] since 0.7.3

数据类型可以混用，参数:[{}, 3, '913a0229-cd5e-45a4-a57a698f2432774f', ...]

事件

selection-change

此事件在启用了多选时(selection=multiple)，选中或取消选中行时触发。

参数说明：

e = {
  selection: [],
  add: [],
  remove: [],
  allSelected: []
}

• selection 当前选中的行集合
• add 此次新选中的行集合
• remove 此次被移除选中的行集合
• allSelected 标记是否已经选中了所有当前缓存的数据,当没有数据项时，allSelected始终为false
  • type=l 时，表示 local-data 指定的所有数据
  • type=i 时，表示已经加载的所有数据
  • type=s 时，表示当前页的数据

插槽

toggle, select, deselect 均为方法，可以直接调用。

可以使用 #footer="{data}" 或 slot-scope="{data}" 来引用数据

注:

header, footer 有相同的作用域数据:

const data = {
  // 页码
  pageIndex: Number,
  // 总页数
  pageCount: Number,
  // 每页的数据量
  pageSize: Number,
  // 总数据量
  dataSize: Number,
  // 当前页的数据量
  viewSize: Number,
  // 选中数量
  selected: Number
}

pagerPrepend, pagerSummary, pagerAppend 三个插槽有相同的作用域数据:

const data = {
  pageIndex: Number,
  pageCount: Number,
  pageSize: Number,
  dataSize: Number,
  selected: Number,
  viewSize: Number,
  position: String['top', 'bottom']
}