xinya-table

信雅表格组件

Demo

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 中的一项