簡介
本組件是有搜索、表格、分頁組成，我們可以通過ZtTable Attributes來對此組件的功能進行配置，同時也可以單獨使用其中某個或者組合使用，相關屬性設置，請參考下面的表格
安裝zt-ui依賴的包
npm install vue -S
npm install vue-router -S
npm install element-ui -S
或
cnpm install vue -S
cnpm install vue-router -S
cnpm install element-ui -S
安裝zt-ui
npm install zt-ui -S
或者
cnpm install zt-ui -S
引用引zt-ui包
// 引zt-ui包
// 我們的zt-ui也提供了按需引包
import { ZtTable } from 'zt-ui';
Vue.use(ZtTable);
案例一：精確搜索+基本表格+分頁
精確搜索+基本表格+分頁
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="false"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
></zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
// 儲存精確搜索內(nèi)的值
selectValue:'',
// 儲存分頁頁碼
currentPage:''
}
},
methods:{
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
}
}
}
</script>
案例二：精確搜索+表格(含有操作)+分頁
精確搜索+表格(含有操作)+分頁
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="false"
:tOperateData="tOperateData"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
@table-operate-btn="tOperateBtn"
>
</zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tOperateData: {
label: '操作',
align: 'center',
width:'100',
btn: [
{
id: 'btn1',
type:'text',
size:'small',
},
{
id: 'btn2',
type:'text',
size:'small',
},
]
},
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
// 儲存精確搜索內(nèi)的值
selectValue: '',
// 儲存分頁頁碼
currentPage: ''
}
},
methods: {
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點擊的按鈕所在行的相關信息，btnId對應的按鈕按鈕id
console.log(scope, btnId);
}
}
}
</script>
案例三：精確搜索+表格(含有操作、多選功能)+分頁
精確搜索+表格(含有操作、多選功能)+分頁
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="false"
:tOperateData="tOperateData"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
@table-operate-btn="tOperateBtn"
@selection-change="selectionChange"
>
</zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 這個代表第一列顯示checkBox（本列根據(jù)業(yè)務需求選擇性使用）
{
type: 'selection',
width: '55',
},
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tOperateData: {
label: '操作',
align: 'center',
width: '100',
btn: [
{
id: 'btn1',
type: 'text',
size: 'small',
},
{
id: 'btn2',
type: 'text',
size: 'small',
},
]
},
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
// 儲存精確搜索內(nèi)的值
selectValue: '',
// 儲存分頁頁碼
currentPage: '',
// 獲取的checkBox被選擇中的相關數(shù)據(jù)
tableSelectionValue: [],
}
},
methods: {
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點擊的按鈕所在行的相關信息，btnId對應的按鈕按鈕id
console.log(scope, btnId);
},
// 當選擇項發(fā)生變化時會觸發(fā)該事件
selectionChange(selection){
// 獲取的checkBox被選擇中的相關數(shù)據(jù)，將數(shù)據(jù)保存下來
this.tableSelectionValue = selection
}
}
}
</script>
案例四：精確搜索+組合搜索(下拉選擇器搜索)+表格(含有操作、多選功能)+分頁
精確搜索+組合搜索(下拉選擇器搜索)+表格(含有操作、多選功能)+分頁
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="true"
:tOperateData="tOperateData"
:selectData="selectData"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
@table-operate-btn="tOperateBtn"
@table-select-change="tableSelectChange"
>
</zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tOperateData: {
label: '操作',
align: 'center',
width: '100',
btn: [
{
id: 'btn1',
type: 'text',
size: 'small',
},
{
id: 'btn2',
type: 'text',
size: 'small',
},
]
},
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
selectData:[
// {}代表一個下拉選擇器
{
// selectOptions：的值就是這個下拉選擇器的值，{}代表下拉選擇器中的每個下拉內(nèi)容
selectOptions: [
{
// 此項被選中之后，獲取到的值
value: '選項1',
// 下拉框內(nèi)顯示在頁面上的選項
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對應的select的id
id:'Select1'
},
{
selectOptions: [
{
value: '選項1',
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
selectValue: '',
placeholder: '請選擇',
span: 4,
id:'Select2'
},
],
// 儲存精確搜索內(nèi)的值
selectValue: '',
// 儲存分頁頁碼
currentPage: '',
}
},
methods: {
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點擊的按鈕所在行的相關信息，btnId對應的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會觸發(fā)該事件
tableSelectChange(selectValue,selectId){
// select值改變返回該select的值selectValue，以及對應的selectId
console.log(selectValue,selectId);
},
}
}
</script>
案例五：精確搜索+組合搜索(下拉選擇器搜索、時間范圍搜索)+表格(含有操作、多選功能)+分頁
精確搜索+組合搜索(下拉選擇器搜索、時間范圍搜索)+表格(含有操作、多選功能)+分頁
精確搜索+組合搜索(下拉選擇器搜索、時間范圍搜索)+表格(含有操作、多選功能
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="true"
:tOperateData="tOperateData"
:selectData="selectData"
:datePicker="datePicker"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
@table-operate-btn="tOperateBtn"
@table-select-change="tableSelectChange"
@date-picker-change="datePickerChange"
>
</zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tOperateData: {
label: '操作',
align: 'center',
width: '100',
btn: [
{
id: 'btn1',
type: 'text',
size: 'small',
},
{
id: 'btn2',
type: 'text',
size: 'small',
},
]
},
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
selectData: [
// {}代表一個下拉選擇器
{
// selectOptions：的值就是這個下拉選擇器的值，{}代表下拉選擇器中的每個下拉內(nèi)容
selectOptions: [
{
// 此項被選中之后，獲取到的值
value: '選項1',
// 下拉框內(nèi)顯示在頁面上的選項
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對應的select的id
id: 'Select1'
}
],
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
},
// 儲存精確搜索內(nèi)的值
selectValue: '',
// 儲存分頁頁碼
currentPage: '',
}
},
methods: {
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點擊的按鈕所在行的相關信息，btnId對應的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會觸發(fā)該事件
tableSelectChange(selectValue, selectId){
// select值改變返回該select的值selectValue，以及對應的selectId
console.log(selectValue, selectId);
},
datePickerChange(date){
// 組合搜索時間選擇器值變化時觸發(fā)事件,返回格式化后的date，
console.log(date);
},
}
}
</script>
案例六：精確搜索+組合搜索(下拉選擇器搜索、時間范圍搜索)+表格(含有操作、多選功能)+表格排序+分頁
精確搜索+組合搜索(下拉選擇器搜索、時間范圍搜索)+表格(含有操作、多選功能)+表格排序+分頁
<template>
<div id="tsp">
<zt-table
:theadData="theadData"
:tbodyData="tbodyData"
:isShowGroupSearch="true"
:tOperateData="tOperateData"
:selectData="selectData"
:datePicker="datePicker"
@table-precise-search="tablePreciseSearch"
@current-pag-change="currentPagChange"
@table-operate-btn="tOperateBtn"
@table-select-change="tableSelectChange"
@date-picker-change="datePickerChange"
@sort-change="sortChange"
>
</zt-table>
</div>
</template>
<script>
export default{
data(){
return {
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '日期',
width: '180',
// 內(nèi)容查處格子，查處部分"..."代替
showOverflowTooltip: true,
align: 'center',
sortable:'custom'
},
{
prop: 'col2',
label: '姓名',
width: '180',
showOverflowTooltip: true,
align: 'center',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
align: 'center',
}
],
tOperateData: {
label: '操作',
align: 'center',
width: '100',
btn: [
{
id: 'btn1',
type: 'text',
size: 'small',
},
{
id: 'btn2',
type: 'text',
size: 'small',
},
]
},
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
selectData: [
// {}代表一個下拉選擇器
{
// selectOptions：的值就是這個下拉選擇器的值，{}代表下拉選擇器中的每個下拉內(nèi)容
selectOptions: [
{
// 此項被選中之后，獲取到的值
value: '選項1',
// 下拉框內(nèi)顯示在頁面上的選項
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對應的select的id
id: 'Select1'
}
],
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
},
// 儲存精確搜索內(nèi)的值
selectValue: '',
// 儲存分頁頁碼
currentPage: '',
}
},
methods: {
// 精確搜索時候，點擊搜索按鈕或者回車鍵(搜索框處于focus)會觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁頁碼改變時候會觸發(fā)
currentPagChange(currentPage){
// 將儲存分頁頁碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點擊的按鈕所在行的相關信息，btnId對應的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會觸發(fā)該事件
tableSelectChange(selectValue, selectId){
// select值改變返回該select的值selectValue，以及對應的selectId
console.log(selectValue, selectId);
},
datePickerChange(date){
// 組合搜索時間選擇器值變化時觸發(fā)事件,返回格式化后的date，
console.log(date);
},
// 當表格的排序條件發(fā)生變化的時候會觸發(fā)該事件
sortChange(column, prop, order){
console.log(column, prop, order);
}
}
}
</script>
ZtTable Attributes 組件的屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| isShowPreciseSearch | 是否顯示精確搜索功能 | Boolean | true/false | true |
| isShowGroupSearch | 是否顯示組合搜索功能 | Boolean | true/false | true |
| theadData | 表頭數(shù)據(jù) | Array | —— | —— |
| tbodyData | 表身數(shù)據(jù) | Array | —— | —— |
| border | 是否帶有縱向邊框 | Boolean | —— | false |
| stripe | 是否為斑馬紋 table | Boolean | —— | false |
| show-header | 是否顯示表頭 | Boolean | —— | true |
| highlight-current-row | 是否要高亮當前行 | Boolean | —— | false |
| empty-text | 空數(shù)據(jù)時顯示的文本內(nèi)容，也可以通過 slot="empty" 設置 | String | —— | 暫無數(shù)據(jù) |
| default-sort | 默認的排序列的prop和順序。它的prop屬性指定默認的排序的列，order指定默認排序的順序 | Object | order: ascending, descending | 如果只指定了prop, 沒有指定order, 則默認順序是ascending |
| selectData | 組合搜索下拉框搜索數(shù)據(jù) | Array | —— | —— |
| tOperateData | 表格右側(cè)是操作數(shù)據(jù) | Object | —— | —— |
| isShowPagination | 是否顯示分頁功能 | Boolean | true/false | true |
| datePicker | 時間選擇器 | Object | —— | —— |
| layout | 組件布局，子組件名用逗號分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| page-size | 每頁顯示個數(shù)選擇器的選項設置 | Number | —— | [10, 20, 30, 40, 50, 100] |
| isShowPagination | 是否顯示分頁功能 | Boolean | true/false | true |
| isShowOperate | 是否顯示表格右側(cè)的按鈕功能 | Boolean | true/false | false |
TheadData Attributes 表格頭部屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| type | 對應列的類型。如果設置了 selection 則顯示多選框；如果設置了 index 則顯示該行的索引（從 1 開始計算 ）；如果設置了 expand 則顯示為一個可展開的按鈕 | String | selection/index/expand | —— |
| label | 顯示的標題 | String | —— | —— |
| prop | 對應列內(nèi)容的字段名，也可以使用 property 屬性 | String | —— | —— |
| width | 對應列的寬度 | String | —— | —— |
| minWidth | 對應列的最小寬度，與 width 的區(qū)別是 width 是固定的，minWidth會把剩余寬度按比例分配給設置了 minWidth 的列 | String | —— | —— |
| fixed | 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) | String, Boolean | true/left/right | —— |
| sortable | 對應列是否可以排序，如果設置為 'custom'，則代表用戶希望遠程排序，需要監(jiān)聽 Table 的 sort-change 事件 | String, Boolean | true/false/'custom' | false |
| showOverflowTooltip | 當內(nèi)容過長被隱藏時顯示 tooltip | Boolean | —— | false |
| align | 對齊方式 | String | left/center/right | left |
| headerAlign | 表頭對齊方式，若不設置該項，則使用表格的對齊方式 | String | left/center/right | —— |
| className | 列的 className | String | —— | —— |
| labelClassName | 當前列標題的自定義類名 | String | —— | —— |
| selectable | 僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | —— | —— |
// 下面每個{}代表一列的表頭數(shù)據(jù)
theadData: [
// 這個代表第一列顯示checkBox（本列根據(jù)業(yè)務需求選擇性使用）
{
type: 'selection',
width: '55',
},
// 一下是每列表頭對應的數(shù)據(jù),
// 具體的配置請參考對應的文檔配置
{
prop: 'col1',
label: '年齡',
width: '180',
align: 'center',
sortable: true
},
{
prop: 'col2',
label: '姓名',
width: '180',
},
{
prop: 'col3',
label: '地址',
showOverflowTooltip: true,
headerAlign: 'center',
align:'center',
className: 'hhh'
}
],
TbodyData Attributes 表格身體屬性
表格數(shù)據(jù)，是Array，里面是每個Object是表格中每行的數(shù)據(jù)，每個Object的屬性是TheadData每列對應的prop值
tbodyData: [
// {}是每一行數(shù)據(jù)，這里的每個字段就代表對應表都的字段，也就是prop的值
{
col1: '2016-05-02',
col2: '小虎',
col3: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
col1: '2016-05-04',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
col1: '2016-05-01',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
col1: '2016-05-03',
col2: '王小虎',
col3: '上海市普陀區(qū)金沙江路 1516 弄'
}
],
SelectData Attributes 組合搜索的屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| selectOptions | 下拉框內(nèi)的數(shù)據(jù) | Array | —— | —— |
| value | 選項的值 | String/Number/Object | —— | —— |
| label | 選項的標簽，若不設置則默認與 value 相同 | String/Number | —— | —— |
| selectValue | select的默認值 | String | —— | —— |
| placeholder | 占位符 | String | —— | —— |
| span | 柵格占據(jù)的列數(shù)（總列數(shù)24） | Number | —— | —— |
selectData:[
// {}代表一個下拉選擇器
{
// selectOptions：的值就是這個下拉選擇器的值，{}代表下拉選擇器中的每個下拉內(nèi)容
selectOptions: [
{
// 此項被選中之后，獲取到的值
value: '選項1',
// 下拉框內(nèi)顯示在頁面上的選項
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對應的select的id
id:'Select1'
},
{
selectOptions: [
{
value: '選項1',
label: '黃糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}
],
selectValue: '',
placeholder: '請選擇',
span: 4,
id:'Select2'
},
]
TOperateData Attributes 表格操作屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| type | 對應列的類型。如果設置了 selection 則顯示多選框；如果設置了 index 則顯示該行的索引（從 1 開始計算 ）；如果設置了 expand 則顯示為一個可展開的按鈕 | String | selection/index/expand | —— |
| label | 顯示的標題 | String | —— | —— |
| prop | 對應列內(nèi)容的字段名，也可以使用 property 屬性 | String | —— | —— |
| width | 對應列的寬度 | String | —— | —— |
| minWidth | 對應列的最小寬度，與 width 的區(qū)別是 width 是固定的，minWidth會把剩余寬度按比例分配給設置了 minWidth 的列 | String | —— | —— |
| fixed | 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) | String, Boolean | true/left/right | —— |
| sortable | 對應列是否可以排序，如果設置為 'custom'，則代表用戶希望遠程排序，需要監(jiān)聽 Table 的 sort-change 事件 | String, Boolean | true/false/'custom' | false |
| showOverflowTooltip | 當內(nèi)容過長被隱藏時顯示 tooltip | Boolean | —— | false |
| align | 對齊方式 | String | left/center/right | left |
| headerAlign | 表頭對齊方式，若不設置該項，則使用表格的對齊方式 | String | left/center/right | —— |
| className | 列的 className | String | —— | —— |
| labelClassName | 當前列標題的自定義類名 | String | —— | —— |
| selectable | 僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | —— | —— |
| btn | 按鈕數(shù)據(jù) | Arrary | 請參考下面的Btn Attributes | —— |
Btn Attributes 組合搜索時間選擇器屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| size | 類型 | String | primary,success,warning,danger,info,text | —— |
| type | 尺寸 | String | large,small,mini | —— |
| plain | 是否樸素按鈕 | Boolean | —— | false |
| disabled | 是否禁用狀態(tài) | Boolean | —— | false |
| icon | 圖標，element-ui的圖標庫中的圖標名 | String | —— | —— |
| autofocus | 是否默認聚焦 | Boolean | —— | false |
DatePicker Attributes 組合搜索時間選擇器屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| isShowDataPicker | 是否顯示時間選擇器 | Boolean | true/false | false |
| span | 柵格占據(jù)的列數(shù)（總列數(shù)24） | Number | —— | —— |
| isShowPickerOptions | 當前時間日期選擇器特有的選項參考下表 | Boolean/Object | true/false/Object | false |
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
}
Picker Options 組合搜索時間選擇器快捷的屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| shortcuts | 設置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表 | Object[] | —— | —— |
| disabledDate | 設置禁用狀態(tài)，參數(shù)為當前日期，要求返回 Boolean | Function | —— | —— |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 選中日期后會執(zhí)行的回調(diào)，只有當 daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | —— | —— |
Shortcuts 設置快捷選項屬性
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| text | 標題文本 | string | —— | —— |
| onClick | 選中后的回調(diào)函數(shù)，參數(shù)是 vm，可通過觸發(fā) 'pick' 事件設置選擇器的值。例如 vm.$emit('pick', new Date()) | function | —— | —— |
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 自定義快捷選擇
isShowPickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一個月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三個月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
}
ZtTable Events 組件事件
| 事件名 | 說明 | 參數(shù) |
|---|---|---|
| table-reset-value | 組合查詢或者精確查詢的搜索框存在值時才會觸發(fā)重置事件 | —— |
| date-picker-change | 組合搜索時間選擇器值變化時觸發(fā)事件 | 格式化后的date |
| table-select-change | 組合select選擇器值改變會觸發(fā)該事件 | select值改變返回該select的值selectValue |
| table-switch-search-way | 切換精確搜索和組合搜索會觸發(fā)該事件 | —— |
| on-icon-click | 點擊精確搜索右側(cè)的X 按鈕會觸發(fā)該事件 | —— |
| table-precise-search | 精確搜索時候，點擊搜索按鈕或者回車鍵(input處于focus)會觸發(fā)事件 | 當前精確搜索框內(nèi)的值 preciseValue |
| current-change | 當表格的當前行發(fā)生變化的時候會觸發(fā)該事件，如果要高亮當前行，請打開表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| sort-change | 當表格的排序條件發(fā)生變化的時候會觸發(fā)該事件 | { column, prop, order } |
| select | 當用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件 | selection, row |
| select-all | 當用戶手動勾選全選 Checkbox 時觸發(fā)的事件 | selection |
| selection-change | 當選擇項發(fā)生變化時會觸發(fā)該事件 | selection |
| cell-mouse-enter | 當單元格 hover 進入時會觸發(fā)該事件 | row, column, cell, event |
| cell-mouse-leave | 當單元格 hover 退出時會觸發(fā)該事件 | row, column, cell, event |
| cell-click | 當某個單元格被點擊時會觸發(fā)該事件 | row, column, cell, event |
| cell-dblclick | 當某個單元格被雙擊擊時會觸發(fā)該事件 | row, column, cell, event |
| row-click | 當某一行被點擊時會觸發(fā)該事件 | row, event, column |
| row-contextmenu | 當某一行被鼠標右鍵點擊時會觸發(fā)該事件 | row, event |
| row-dblclick | 當某一行被雙擊時會觸發(fā)該事件 | row, event |
| header-click | 當某一列的表頭被點擊時會觸發(fā)該事件 | column, event |
| current-table-change | 當表格的當前行發(fā)生變化的時候會觸發(fā)該事件，如果要高亮當前行，請打開表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| size-change | pageSize 改變時會觸發(fā) | 每頁條數(shù)size |
| current-pag-change | 分頁頁碼改變時候會觸發(fā) | 當前頁數(shù) |
| table-operate-btn | 表格右側(cè)操作按鈕 | {scop,btnId} |
