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	false
virtual-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

事件名	说明	返回值
on-current-change	开启 `highlight-row` 后有效，当表格的当前行发生变化的时候会触发	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

名称	说明
header	表头
footer	页脚
loading	加载中

Table methods

方法名	说明	参数
exportCsv	将数据导出为 .csv 文件，说明： 支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。 IE9、Safari 需要手动修改后缀名为 .csv。 IE9暂时只支持英文，中文会显示为乱码。	params(Object): filename 文件名，默认为 table.csv original 是否导出为原始数据，默认为 true noHeader 不显示表头，默认为 false columns 自定义导出的列数据 data 自定义导出的行数据 callback 添加此函数后，不会下载，而是返回数据 separator 数据分隔符，默认是逗号(,) quoted 每项数据是否加引号，默认为 false 说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容
clearCurrentRow	清除高亮项，仅在开启 highlight-row 时可用	无

column

列描述数据对象，是 columns 中的一项

属性	说明	类型	默认值
type	列类型，可选值为 index、selection、expand、html	String	-
title	列头显示文字	String	#
key	对应列内容的字段名	String	-
width	列宽	Number	-
minWidth	最小列宽	Number	-
maxWidth	最大列宽	Number	-
align	对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐	String	left
className	列的样式名称	String	-
fixed	列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧	String	-
ellipsis	开启后，文本将不换行，超出部分显示为省略号	Boolean	false
tooltip	开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容	Boolean	false
render	自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。 学习 Render 函数的内容	Function	-
renderHeader	自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。	Function	-
indexMethod	type 为 index 时可用，自定义序号	Function，参数 row 为当前行内容	-
sortable	对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序，需要监听 Table 的 on-sort-change 事件	Boolean | 'custom'	false
sortMethod	自定义排序使用的方法，接收三个参数 a 、 b 和 type，当设置 sortable: true 时有效。type 值为 asc 和 desc	Function	-
sortType	设置初始化排序。值为 asc 和 desc	String	-
filters	过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置 filterMethod	Array	-
filterMethod	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示	Function	-
filterMultiple	数据过滤的选项是否多选	Boolean	true
filteredValue	在初始化时使用过滤，数组，值为需要过滤的 value 集合	Array	-
filterRemote	使用远程过滤	Function	-
children	表头分组	Array	-