版本

v1.1.1

安装

$ npm install xw-table --save

更新

$ npm update xw-table

引入

在入口文件 main.js 中如下配置：

import xwTable from 'xw-table';

Vue.use(xwTable);

页面中使用组件

<xw-table></xw-table>

config 配置

props：

属性	说明	类型	默认值
tableColumns	传入表头数据	Array	必传数据
tableData	传入表格数据	Array	[]
headerShow	是否显示页眉	Boolean	true
footerShow	是否显示页脚	Boolean	true
seekShow	是否显示搜索框控件	Boolean	true
pageShow	是否显示分页控件	Boolean	true
modalTitle	对话框标题	String	对话框标题
noDataText	表格数据为空时显示的提示内容	String	暂无数据
pagingData	传入分页数据	Object	{total: 0, current_page: 1, page_size: 10,}
modalWidth	对话框宽度	String / Number	80%
modalFooterHide	不显示对话框页脚	Boolean	false
modalOkBtnName	对话框页脚确定按钮名称	String	确定
okBtnHide	隐藏对话框页脚确定按钮	Boolean	false
modalCancelBtnName	对话框页脚取消按钮名称	String	取消
modalBtnPlace	对话框页脚按钮位置	String	right
searchTxt	搜索框占位文本	String	搜索...
loading	表格是否加载中	Boolean	false

表头数据参数：

参数名	说明	类型	默认值
editable	需要编辑的当前字段	Boolean	false
handle	设置操作按钮	Array	无

表头handle参数：

参数名	说明	类型	默认值
name	按钮名称	String	按钮
hideBtn	隐藏按钮	Boolean	false
modalShow	是否打开对话框	Boolean	false
poptipOpen	是否打开气泡提示	Boolean	false
button_props	按钮组件的iview原生api属性	Object	{}
poptip_props	气泡提示组件的iview原生api属性	Object	{}
callback	按钮渲染时的回调，返回值：params：表格当前行参数，btnParams：按钮参数	Function(params, btnParams)	无
rowEdit	是否打开编辑当前行功能（编辑当前行按钮不支持“button_props”参数）	Boolean	false
editKeyArr	需要编辑行的表头key值（rowEdit为true时必填）	Array	无

events：

事件名	说明	返回值	类型
on-page-change	页码改变时	page：当前页码	number
on-page-size-change	切换每页条数时的回调，返回切换后的每页条数	page_size：每页条数	number
select-change	勾选改变时	checkedData：已选择的数据	[]
on-btn-click	点击表格中的按钮时触发	data：返回表格当前行数据,和当前handle的参数	{}
on-poptip-ok	点击表格中的气泡提示确定按钮时触发	data：返回表格当前行数据,和当前handle的参数	{}
on-poptip-cancel	点击表格中的气泡提示取消按钮时触发	data：返回表格当前行数据,和当前handle的参数	{}
on-modal-ok	对话框确定按钮点击事件	--	--
on-modal-cancel	对话框取消按钮点击事件	--	--
on-search	点击或回车触发搜索按钮事件	value：搜索框输入的值	String
on-editRow-save	点击编辑但前行的保存按钮	editSuccData：返回保存成功后的数据	Object

slot：

名称	说明
header	表格页头
footer	表格页尾
modalContent	对话框内容
modalFooterBtn	自定义对话框页脚按钮