xinya-table v2.1.88
xinya-table
信雅表格组件
Usage
Install
npm i xinya-table
Import
import Vue from 'vue'
import XinyaTable from 'xinya-table'
Vue.use(XinyaTable)
Table Tool Use
<table-tool top="30" left="2" :select-num="selectNum" @on-close-tool="handleCloseTool">
<tool-item @on-click="onClick" name="修改"></tool-item>
</table-tool>
Table Search Use
<table-search show-create show-export @on-table-search="handleSearch"></table-search>
Table Custom Filter Use
<custom-filter @on-delete-filter="handleDeleteFilter" @on-save-filter="handleSaveFilter" :filters="filters"
:fields="fields" :select-filter-id="selectFilterId" @on-click-filter="handleClickFilter"></custom-filter>
Table Props
`属性 说明 类型 默认值 data 显示的结构化数据,其中,字段 cellClassName 用于设置任意单元格的样式名称,因此数据不能使用该字段,详见示例特定样式。 Array [] columns 表格列的配置描述,具体项见后文 Array [] stripe 是否显示间隔斑马纹 Boolean false border 是否显示纵向边框 Boolean false show-header 是否显示表头 Boolean true width 表格宽度,单位 px Number | String 自动 height 表格高度,单位 px,设置后,如果表格内容大于此值,会固定表头 Number | String - loading 表格是否加载中 Boolean false disabled-hover 禁用鼠标悬停时的高亮 Boolean falsevirtual-scroller 是否启用虚拟滚动 Boolean false highlight-row 是否支持高亮选中的行,即单选 Boolean false row-class-name 行的 className 的回调方法,传入参数:
row
:当前行数据index
:当前行的索引 Function - size 表格尺寸,可选值为large
、small
、default
或者不填 String - no-data-text 数据为空时显示的提示内容 String 暂无数据 no-filtered-data-text 筛选数据为空时显示的提示内容 String 暂无筛选结果`
Table events
currentRow
:当前高亮行的数据oldCurrentRow
:上一次高亮的数据 on-select 在多选模式下有效,选中某一项时触发selection
:已选项数据row
:刚选择的项数据 on-select-cancel 在多选模式下有效,取消选中某一项时触发selection
:已选项数据row
:取消选择的项数据 on-select-all 在多选模式下有效,点击全选时触发selection
:已选项数据 on-select-all-cancel 在多选模式下有效,点击取消全选时触发selection
:已选项数据 on-selection-change 在多选模式下有效,只要选中项发生变化时就会触发selection
:已选项数据 on-sort-change 排序时有效,当点击排序时触发column
:当前列数据key
:排序依据的指标order
:排序的顺序,值为asc
或desc
on-filter-change 筛选时有效,筛选条件发生变化时触发 当前列数据 on-row-click 单击某一行时触发当前行的数据
index on-row-dblclick 双击某一行时触发
当前行的数据
index on-expand 展开或收起某一行时触发
row
:当前行的数据status
:当前的状态
Table slot
Table methods
column
列描述数据对象,是 columns 中的一项
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago