0.1.0 • Published 2 years ago
zelement-table v0.1.0
zelement-table
Install
npm install zelement-table --save
or
yarn add zelement-table --saveQuick Start
//main.js
import Vue from 'vue';
import ZelementTable from "zelement-table";
import "zelement-table/lib/zelement-table.css";
Vue.use(ZelementTable)API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|---|---|---|---|---|---|
| tableData | 表格数据 | Array | [] | [] | |
| tableConfig | 表格配置参数 | Object | {loading:true表格加载 loading,size:"mini"表格尺寸,tableKey:"table1"表格 key，用于列读取设置是否显示的存放在 localStorage 表格标识,singleCheck:true单选，checkAll:true多选,orderNumber:true表格序号,border:true边框，operation:true是否显示操作列,total:30总数据,showPage:true是否显示分页,operationConfig:{}操作列配置,pageOptions:{currentPage: 1,pageSize: 10,}分页配置} | {} | |
| tableConfig.operationConfig | 表格操作配置项 | Object | {btnType: "button"button 按钮或者 dropdown 下拉菜单,size:'mini'按钮大小, btnList: [] } | {} | |
| tableConfig.operationConfig.btnList | 表格操作列按钮配置项dropdown 下拉类型数据结构相同 | [] | [{label: "添加"按钮文字, isDisabled: () => {return false}是否禁用,handle: this.add点击函数回调,type: "primary"按钮类型}] | [] | |
| columnData | 列配置数据项 | Array | [{label: "名称", prop:"name"字段名,sort:true是否排序,disabled:true是否禁用,slot:ture此列内容是否插槽,filters:{text:"激活",value:"active"},hidden:true此列是否隐藏}] | [] | |
| @filterMethod | 过滤器事件(value)接收参数数据 | Function | 非必填 | Function | |
| @sortChange | 排序事件(value)接收参数数据 | Function | 非必填 | Function | |
| @singleCheckHandle | 单选数据回调事件(value)接收参数单选数据 | Function | 非必填 | Function | |
| @checkAllHandle | 全选数据回调事件(value)接收参数多选数据 | Function | 非必填 | Function | |
| @handleSizeChange | 分页每页显示多少条(size)接收参数 | Function | 非必填 | Function | |
| @handleCurrentChange | 分页当前页回调事件(page)接收参数 | Function | 非必填 | Function |
0.1.0
2 years ago