element-datatable

一款基于element-ui的表格插件，支持所有element-ui的属性和方法，可以接受本地数据和ajax参数异步请求服务器数据

A form plug-in based on element-ui that supports the properties and methods of all element-ui and can accept local data or ajax parameter asynchronous request server data

相关依赖 Dependencies

• axios, element-ui, qs
• IE >= 9

基本用法 Build Setup

• 安装 install

npm i element-datatable -S

• 在项目中引入element-ui依赖,参见http://element.eleme.io. 引入element相关的css等文件.

• 使用本地数据 use local data

<template>
  <div id="app">
    <element-datatable :column-attributes="columnAttributes" :data="tableData" />
  </div>
</template>

<script>
import { ElementDatatable  } from '@/components'

export default {
  name: "App",
  components: {
    ElementDatatable
  },
  data() {
    return {
      tableData: [
        {
          date: '2018-09-30',
          content: '123',
          isDelay: false,
          delayReason: '',
          checked: true
        }
      ],
      columnAttributes: [ // columnAttributes里面的属性与table-column attributes 一致, 但是采用小驼峰命名
        { label: "序号", type: 'index', width: '50', align: 'center' },
        { type: 'selection', align: 'center', width: 55 },
        { label: '日期', prop: 'date', width: '120', align: 'center', sortable: true },
        { label: '工作内容', prop: 'content', headerAlign: 'center', },
        { label: '工期是否延误', prop: 'isDelay', headerAlign: 'center', width: 130 },
        { label: '延误原因', prop: 'delayReason', headerAlign: 'center' }
      ]
    }
  }
}
</script>

• 使用ajax获取数据 get data by ajax

<template>
  <div id="app">
    <element-datatable :column-attributes="columnAttributes" :ajax="ajax" />
  </div>
</template>

<script>
import ElementDatatable from './components'

export default {
  name: "App",
  components: {
    ElementDatatable
  },
  data() {
    return {
      tableData: [
        {
          date: '2018-09-30',
          content: '123',
          isDelay: false,
          delayReason: '',
          checked: true
        }
      ],
      columnAttributes: [
        { label: "序号", type: 'index', width: '50', align: 'center' },
        { type: 'selection', align: 'center', width: 55 },
        { label: '日期', prop: 'date', width: '120', align: 'center', sortable: true },
        { label: '工作内容', prop: 'content', headerAlign: 'center', },
        { label: '工期是否延误', prop: 'isDelay', headerAlign: 'center', width: 130 },
        { label: '延误原因', prop: 'delayReason', headerAlign: 'center' }
      ],
      ajax: { // 支持传入完整的ajax对象
        url: '',
        method: '',
        headers: {},
        params: {},
        data: {}
      }
    }
  }
}
</script>

有关el-table和el-table-column使用方法，请参考element-ui相关说明

其它功能 Other property & event

• 支持所有的el-table、el-table-column属性、事件和方法.

• checked-prop
  仅在tyep="selection"时有效，该属性接收一个字符串指定某一属性或方法，通过验证数据的指定属性值确认是否选中该条数据；方法接收两个参数(row, index), 通过返回true或false指定该数据是否选中

• selectAbleProp
  仅在tyep="selection"时有效，该属性接收一个字符串指定某一属性，通过验证数据的该属性值判断是否可选，作用与el-table-column的selectable属性相同。

ElementDatatable Attributes

参数	说明	类型	可选值	默认值
ajax	用于向后端发送ajax请求, 类型为string时接收一个url地址， 类型为object时接收整个ajax对象， 默认使用get方式	string / object	--	--
serverParams	表格请求的查询条件、请求参数	object	--	--
showLoading	表格请求时是否显示loading加载	boolean	--	true
columnAttributes	表格列的属性， 属性值与element table-column attributes 一致， 但是采用小驼峰命名规则	array	--	--
checkedProp	仅对 type=selection 的列有效， 指定默认选中， 或者传入一个函数，返回一个Boolean 表示是否选中	string/function（row, index）	--	--
selectAbleProp	仅对 type=selection 的列有效，与表格列中的selectAble属性作用一致，决定这一行的 CheckBox 是否可以勾选	string	--	--
createdUnload	指定表格初始化的时候是否发送请求获取数据	boolean	--	false
pageIndexKey	指定表格的pageIndex属性	string	--	pageIndex
pageSizeKey	指定表格的pageSize属性	string	--	pageSize
dataKey	指定后台返回数据的key值	string	--	tbody
totalKey	指定后台返回表格总条数的key值	string	--	--
data	采用本地数据时有效，显示的数据	array	--	--
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	string/number	--	--
max-height	Table 的最大高度	string/number	--	--
stripe	是否为斑马纹 table	boolean	--	false
border	是否带有纵向边框	boolean	--	true
size	Table 的尺寸	string	medium / small / mini	--
fit	列的宽度是否自撑开	boolean	--	true
show-header	是否显示表头	boolean	--	true
highlight-current-row	是否要高亮当前行	boolean	--	false
current-row-key	当前行的 key，只写属性	string/number	--	--
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	--	--
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	--	--
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	--	--
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	--	--
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	Function({row, rowIndex})/String	--	--
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex})/Object	--	--
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	--	--
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	--	--
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	--	--
empty-text	空数据时显示的文本内容，也可以通过 slot="empty" 设置	String	--	暂无数据
default-expand-all	是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效	Boolean	--	false
expand-row-keys	可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。	Array	--
default-sort	默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序	Object	order: ascending, descending	如果只指定了prop, 没有指定order, 则默认顺序是ascending
tooltip-effect	tooltip effect 属性	String	dark/light	--
show-summary	是否在表尾显示合计行	Boolean	--	false
sum-text	合计行第一列的文本	String	--	合计
summary-method	自定义的合计计算方法	Function({ columns, data })	--	--
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	--	--
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	Boolean	--	true
small	是否使用小型分页样式	boolean	--	false
background	是否为分页按钮添加背景色	--	false
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	--	--
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	--	[10, 20, 30, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	--	--
prev-text	替代图标显示的上一页文字	string	--	--
next-text	替代图标显示的下一页文字	string	--	--
disabled	是否禁用分页按钮	boolean	--	false

ElementDatatable Events

事件名	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, event, column
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, event
row-dblclick	当某一行被双击时会触发该事件	row, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。	filters
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件	row, expandedRows

ElementDatatable Methods

方法名	说明	参数
reloadData	重新加载表格数据,可以新加参数座位查询字段	searchObj

ElementDatatable Slot

slot
slot name=“first”