# table表格
### 概述
Cap4EasyTable是一个可拓展的且内置各种操作与配置接口的table组件。支持宽高设置，序列号，选择框，
列宽可拖动，列拖拽，冻结列，操作列固定，hover颜色及点击颜色设置，水平border及垂直border显示，行
点击，列点击，自排序，列排序，数据可筛选等功能。并且可以支持大数据量显示模式（循环轮播原理）。
----
### 组件调用方法
```js
import Cap4EasyTable from 'cap4-business/lib/cap4-easy-table/index.js';
import 'cap4-business/lib/cap4-easy-table/css/cap4-easy-table.css';
// 或者cli3脚手架直接引用源码（一般采用相对路径或工程内别名路径）
import Cap4EasyTable from 'component_doc/packages/cap4-easy-table/index.js';
```
### 基础表格
<template>
<cap4EasyTable
key="demo1"
:height=500
:tableData="tableData"
:msg="msg"
:columns="columns"
:tableConfig="tableConfig"
>
</cap4EasyTable>
</template>
<script>
export default {
data(){
return {
tableData: [],
msg: '',
columns: [],
tableConfig: {
localStorageKey: "localStorageKey_demo1",
bigDataModel: false,
columnWidthDrag: false,
columnPositionMove: false,
frozenOperationCol: false,
hasDropDown: false,
hasFrozenOeration: false,
titleClickChoose: false
}
}
},
mounted() {
window.setTimeout(() => {
this.tableData = [];
for (let i = 0; i < 10; i++) {
let num = i * 16;
this.tableData.push(
{isLock:true, name:'赵伟',tel: ++num+'-'+ '156*****1987',
'01':{showValue:'路飞',src:'http://open.seeyon.com/seeyon/img/group5.png'},
date: {showValue: '2018-10-12',config:{backgroundColor:'green'}},
tel3: 12312.56123,
hobby: function (h) {
return h('div', {
style: ''
}, '123');
}, address:'上海市黄浦区金陵东路569号17楼'},
{name:'李伟',tel: ++num+'-'+ '182*****1538',
date: {showValue: '2018-10-11',config:{backgroundColor:'green'}},
hobby:'钢琴、书法、唱歌',address:'上海市奉贤区南桥镇立新路12号2楼'},
{isLock:true, name:'孙伟',tel: ++num+'-'+ '161*****0097',
date: {showValue: '2018-10-01',config:{backgroundColor:'red'}},
hobby:'钢琴、书法、唱歌',address:'上海市崇明县城桥镇八一路739号'},
{name:'周伟',tel: ++num+'-'+ '197*****1123',hobby:'钢琴、书法、唱歌',address:'上海市青浦区青浦镇章浜路24号'},
{name:'吴伟',tel: ++num+'-'+ '183*****6678',hobby:'钢琴、书法、唱歌',address:'上海市松江区乐都西路867-871号'},
);
}
this.columns = [];
for (let i = 0; i < 3; i++) {
const str = i === 0 ? '' : i;
this.columns.push(
{field: 'name' + str, title: '123', isEdit: true, sortable: false, isFrozen: false, width:0,
filterable: true
},
{field: 'tel' + str, title: '手机号码', sortable: true, filterable: true, searchable: true},
{field: 'operation' + str, type: 'slot', title: '操作', width:100,
},
{field: '01' + str, title: '123123121313122123', type: 'img', columnAlign:'center', compute: true},
)
}
}, 0);
}
};
</script>
<!-- ::: demo
```html
<cap4-code iconIndex='1'> </cap4-code>
```
::: -->
### 带选择框表格
支持单选或多选
<template>
<cap4EasyTable
key="demo2"
:height=500
:tableData="tableData"
:filterData="filterData"
:msg="msg"
:columns="columns"
:tableConfig="tableConfig"
@titleClick="titleClick"
@rowClick="rowClick"
@rowDblclick="rowDblclick"
@onSubComponent="onSubComponent"
@cellEditDone="cellEditDone"
@selectAll="selectAll"
@selectChange="selectChange"
@getFilterData="getFilterData"
@filterTableContent="filterTableContent"
>
<template slot-scope="slotProps">
{{Math.random()}}
</template>
</cap4EasyTable>
</template>
<script>
export default {
data(){
return {
tableData: [],
filterData: [],
msg: '',
columns: [],
tableConfig: {
localStorageKey: "localStorageKey",
serialNumber: {
show: true,
textAlign: 'left'
},
selection: {
show: true,
isMultiple: true
},
lockable: true,
frozenOperationCol: true,
isVerticalResize: false,
showVerticalBorder: true,
defaultSort: true
},
pageData: {
maxPageSize: 999,
page: 1,
pageSize: 20,
total: 700,
noBoundary: true,
col: {
isNumber: true,
average: 6,
number: 6,
total: 6
}
},
// 示例用，显示触发事件
triggerFunctionArr: []
}
},
mounted() {
window.setTimeout(() => {
this.tableData = [];
for (let i = 0; i < 10; i++) {
let num = i * 16;
this.tableData.push(
{isLock:true, name:'赵伟',tel: ++num+'-'+ '156*****1987',
'01':{showValue:'路飞',src:'http://open.seeyon.com/seeyon/img/group5.png'},
date: {showValue: '2018-10-12',config:{backgroundColor:'green'}},
tel3: 12312.56123,
hobby: function (h) {
return h('div', {
style: ''
}, '123');
}, address:'上海市黄浦区金陵东路569号17楼'},
{name:'李伟',tel: ++num+'-'+ '182*****1538',
date: {showValue: '2018-10-11',config:{backgroundColor:'green'}},
hobby:'钢琴、书法、唱歌',address:'上海市奉贤区南桥镇立新路12号2楼'},
{isLock:true, name:'孙伟',tel: ++num+'-'+ '161*****0097',
date: {showValue: '2018-10-01',config:{backgroundColor:'red'}},
hobby:'钢琴、书法、唱歌',address:'上海市崇明县城桥镇八一路739号'},
{name:'周伟',tel: ++num+'-'+ '197*****1123',hobby:'钢琴、书法、唱歌',address:'上海市青浦区青浦镇章浜路24号'},
{name:'吴伟',tel: ++num+'-'+ '183*****6678',hobby:'钢琴、书法、唱歌',address:'上海市松江区乐都西路867-871号'},
);
}
this.filterData = [];
this.columns = [];
for (let i = 0; i < 3; i++) {
const str = i === 0 ? '' : i;
this.columns.push(
{field: 'name' + str, title: '123', isEdit: true, sortable: false, isFrozen: false, width:0,
filterable: true
},
{field: 'tel' + str, title: '手机号码', sortable: true, filterable: true, searchable: true},
{field: 'operation' + str, type: 'slot', title: '操作', width:100,
},
{field: '01' + str, title: '123123121313122123', type: 'img', columnAlign:'center', compute: true},
)
}
}, 0);
},
methods: {
// 列点击
titleClick(params) {
this.setTriggerFunction('列点击');
},
// 行点击
rowClick(params) {
this.setTriggerFunction('行点击');
},
// 行双击
rowDblclick(params) {
this.setTriggerFunction('行双击');
},
// 子组件回调
onSubComponent(params) {
this.setTriggerFunction('子组件');
},
// 单元格编辑回调
cellEditDone(params) {
this.setTriggerFunction('单元格');
},
// 全选
selectAll(params) {
this.setTriggerFunction('全选');
},
// 选择
selectChange(params) {
this.setTriggerFunction('选择');
},
// 排序
sortChange(params) {
this.setTriggerFunction('排序');
},
// render
renderSlot(slotProps) {
const colData = slotProps.data.data.colData;
const rowData = slotProps.data.data.rowData;
let type = colData.type;
return '<div>123</div>'
},
// 获取筛选数据
getFilterData(params) {
this.setTriggerFunction('筛选值');
},
// 筛选
filterTableContent(params) {
this.setTriggerFunction('筛选');
},
// 设置triggerFunction
setTriggerFunction(str) {
const key = Math.random() + str;
this.triggerFunctionArr.push({
key,
name: str,
});
if (this.triggerFunctionArr.length > 5) {
setTimeout(() => {
this.triggerFunctionArr.shift();
});
}
setTimeout(() => {
let index = this.triggerFunctionArr.findIndex(item => item.key === key);
if (index > -1) {
this.triggerFunctionArr.splice(index, 1);
}
}, 10000);
},
},
computed: {
},
};
</script>
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|--------------------------------|----------|--------------|---------|
|tableData |(必选)列表数据 |Array |— |[] |
|columns |(必选)列信息 |Array |— |[] |
|filterData |(可选)筛选信息 |Array |— |[] |
|width |(可选)宽度 |Number |— |— |
|height |(可选)高度 |Number |— |— |
|tableConfig |(可选)配置项，详细说明见下方 |Object |— |{} |
|showLoading |(可选)是否展示加载态 |Boolean |— |true |
|minWidth |(可选)最小列宽度 |Boolean |— |63 |
|titleRowHeight |(可选)行高 |Function |— |40 |
|isPrint |(可选)是否打印态 |Boolean |— |false |
|printStorageInfo |(可选)打印态需要传递浏览器缓存信息 |Object |— |{} |
|page |(可选)第几页 |Number |— |1 |
|pageSize |(可选)每页的条数 |Number |— |50 |
### tableConfig
table配置项，用object传递减少直接传入参数
| 配置项 | 说明 | 类型 | 可选值 | 示例值 |
|-----------------------|-------------------|-----------|------------|---------|
|serialNumber |显示序号 |Object |— |{show: true, textAlign: 'left'} (显示序列号，且居左显示) |
|selection |显示选择框 |Object |— |{show: true,isMultiple: true} (显示选择框，且支持多选) |
|lockable |显示锁定列 |Boolean |true/false |true |
|isHorizontalResize |水平自适应 |Boolean |true/false |true |
|isVerticalResize |垂直自适应 |Boolean |true/false |true |
|columnWidthDrag |列宽可拖动 |Boolean |true/false |true |
|columnPositionMove |列位置可拖拽 |Boolean |true/false |true |
|frozenOperationCol |右侧固定操作列 |Boolean |true/false |true |
|localStorageKey |localStorage缓存key |String |— |'localStorageKey' (使用唯一值) |
|rowHoverColor |行hover颜色 |Boolean |— |'#F5F5F5' |
|titleBgColor |列头背景色 |Boolean |— |true |
|operationBgColor |固定操作列背景色 |Boolean |— |true |
|titleHoverColor |列头hover颜色 |Boolean |— |true |
|rowClickColor |行点击选中色 |Boolean |— |true |
|showHorizontalBorder |显示水平border |Boolean |true/false |true |
|showVerticalBorder |显示垂直border |Boolean |true/false |true |
|defaultSort |自排序 |Boolean |true/false |true |
|titleRowHeight |行高 |Boolean |— |true |
|bigDataModel |大数据量模式 |Boolean |true/false |true |
|hasDropDown |显示下拉框 |Boolean |true/false |true |
|titleClickSort |列头点击排序 |Boolean |true/false |true |
|titleClickChoose |列点击可选中 |Boolean |true/false |true |
|rowClickUncheck |行重复点击取消选中 |Boolean |true/false |true |
### col配置项属性
| 配置项 | 说明 | 类型 | 可选值 | 示例值 |
|-----------------------|-------------------|-----------|------------|---------|
|filterable |可筛选 |Boolean |true/false |true |
|searchable |筛选可搜索 |Boolean |true/false |true |
|sortable |可排序 |Boolean |true/false |true |
|isFrozen |被冻结 |Boolean |true/false |true |
|width |初始列宽度 |Number |- |100 |
|field |key |String |- |'field01' |
|type |类型 |String |'render'/'slot'/'normalText'/'normalObjText'(.v)/'normalObjectText(.value)'|'normalText' |
|componentName |以组件加载 |String |- |- |
### Event
| 事件名称 | 说明 | 回调参数 |
|----------------------|------------------|-----------|
|titleClick |列点击触发 |列信息 |
|titleUnClick |列重复点击触发 |— |
|rowClick |行点击触发 |行信息 |
|onSubComponent |子组件触发 |— |
|cellEditDone |td编辑触发 |— |
|selectAll |全选时触发 |— |
|selectChange |选择项改变触发 |— |
|sortChange |列排序触发 |— |
|getFilterData |列筛选获取数据触发 |— |
|filterTableContent |列筛选触发 |— |
<!-- ### Slot
| 名称 | 说明 |
|------------- |----------- |
| | | -->
<!-- ### Function
| 名称 | 说明 |
|------------- |----------- |
| | | -->
- 概要
- 技术介绍
- 框架与环境
- vue开发
- 开发规范
- 前端开发规范
- 总体原则
- HTML规范
- HTML&css规范
- vue编码规范
- Javascript规范
- 后端开发规范
- cap4
- 自定义控件
- 前端2.0(PC+移动)
- PC前端
- 后端
- 移动端
- 移动端接口
- 低版本协同升级到V5 8.0适配说明
- 自定义按钮
- 自定义按钮(无流程)
- 自定义控件(列表插槽)
- 自定义按钮(筛选条件)
- 低版本协同升级到V5 8.0适配说明
- 门户空间
- 门户与栏目挂载
- 栏目开发及流程说明
- 页面模板
- 客开通路及插件体系
- 表单设计器扩展配置
- 使用步骤
- 配置说明
- 事件API
- Demo示例
- 运行态客开通路
- 插件使用步骤
- 插件接口
- 事件接口
- 钩子相关接口
- 表单操作接口
- Demo示例
- 插件机制
- 表单运行态接口(旧)
- 白名单插件
- 版本记录
- vue组件库
- 开发指南
- 开发文档规范
- 业务组件介绍
- 业务组件
- table组件
- 分页组件
- title组件
- 统计排队组件
- code组件
- 条件筛选
- 批量导入
- 上传Excel
- 批量更新
- 批量刷新
- UI组件
- 按钮组件
- 复选组件
- 取色器组件
- 示例组件
- 水平选择组件
- 选图标组件
- 提示组件
- 单选组件
- 搜索组件
- 选择组件
- 穿梭框组件
- 标签组件
- 文本组件
- 树组件
- 验证组件
- 菜单组件
- iframe组件
- toolbar
- 统计组件
- 饼图
- 柱状图
- 图标
- 业务关系开发指南
- 自定义触发
- 自定义关联
- 后端API
- 更新表单数据缓存
- 发起表单流程
- 取得指定表单PDF或截图
- 无流程批量添加
- 无流程批量删除
- 无流程批量更新
- 无流程批量导出
- 客开培训文档
- Vue基础培训
- Vue实战培训
- Vue进阶培训
- VueCLI3培训
- cap3
- 自定义控件
- 后端
- 移动端
- 前端编译
- 表单运行态接口
- 协同云