# 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
- 自定義控件
- 后端
- 移動端
- 前端編譯
- 表單運行態接口
- 協同云