簡(jiǎn)介
本組件是有搜索酥诽、表格鞍泉、分頁(yè)組成，我們可以通過(guò)ZtTable Attributes來(lái)對(duì)此組件的功能進(jìn)行配置肮帐，同時(shí)也可以單獨(dú)使用其中某個(gè)或者組合使用咖驮，相關(guān)屬性設(shè)置，請(qǐng)參考下面的表格
安裝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);
案例一：精確搜索+基本表格+分頁(yè)
精確搜索+基本表格+分頁(yè)
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)托修，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段，也就是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 弄'
}
],
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue:'',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage:''
}
},
methods:{
// 精確搜索時(shí)候恒界，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
}
}
}
</script>
案例二：精確搜索+表格(含有操作)+分頁(yè)
精確搜索+表格(含有操作)+分頁(yè)
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段十酣，也就是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 弄'
}
],
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue: '',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage: ''
}
},
methods: {
// 精確搜索時(shí)候眯勾，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點(diǎn)擊的按鈕所在行的相關(guān)信息，btnId對(duì)應(yīng)的按鈕按鈕id
console.log(scope, btnId);
}
}
}
</script>
案例三：精確搜索+表格(含有操作婆誓、多選功能)+分頁(yè)
精確搜索+表格(含有操作吃环、多選功能)+分頁(yè)
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 這個(gè)代表第一列顯示checkBox（本列根據(jù)業(yè)務(wù)需求選擇性使用）
{
type: 'selection',
width: '55',
},
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)洋幻，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段郁轻，也就是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 弄'
}
],
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue: '',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage: '',
// 獲取的checkBox被選擇中的相關(guān)數(shù)據(jù)
tableSelectionValue: [],
}
},
methods: {
// 精確搜索時(shí)候，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點(diǎn)擊的按鈕所在行的相關(guān)信息，btnId對(duì)應(yīng)的按鈕按鈕id
console.log(scope, btnId);
},
// 當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該事件
selectionChange(selection){
// 獲取的checkBox被選擇中的相關(guān)數(shù)據(jù)好唯，將數(shù)據(jù)保存下來(lái)
this.tableSelectionValue = selection
}
}
}
</script>
案例四：精確搜索+組合搜索(下拉選擇器搜索)+表格(含有操作竭沫、多選功能)+分頁(yè)
精確搜索+組合搜索(下拉選擇器搜索)+表格(含有操作、多選功能)+分頁(yè)
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)蜕提，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段，也就是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:[
// {}代表一個(gè)下拉選擇器
{
// selectOptions：的值就是這個(gè)下拉選擇器的值靶端，{}代表下拉選擇器中的每個(gè)下拉內(nèi)容
selectOptions: [
{
// 此項(xiàng)被選中之后谎势，獲取到的值
value: '選項(xiàng)1',
// 下拉框內(nèi)顯示在頁(yè)面上的選項(xiàng)
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請(qǐng)選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對(duì)應(yīng)的select的id
id:'Select1'
},
{
selectOptions: [
{
value: '選項(xiàng)1',
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
selectValue: '',
placeholder: '請(qǐng)選擇',
span: 4,
id:'Select2'
},
],
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue: '',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage: '',
}
},
methods: {
// 精確搜索時(shí)候，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點(diǎn)擊的按鈕所在行的相關(guān)信息杨名，btnId對(duì)應(yīng)的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會(huì)觸發(fā)該事件
tableSelectChange(selectValue,selectId){
// select值改變返回該select的值selectValue脏榆，以及對(duì)應(yīng)的selectId
console.log(selectValue,selectId);
},
}
}
</script>
案例五：精確搜索+組合搜索(下拉選擇器搜索、時(shí)間范圍搜索)+表格(含有操作台谍、多選功能)+分頁(yè)
精確搜索+組合搜索(下拉選擇器搜索须喂、時(shí)間范圍搜索)+表格(含有操作、多選功能)+分頁(yè)
精確搜索+組合搜索(下拉選擇器搜索趁蕊、時(shí)間范圍搜索)+表格(含有操作坞生、多選功能
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)掷伙，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段恨胚，也就是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: [
// {}代表一個(gè)下拉選擇器
{
// selectOptions：的值就是這個(gè)下拉選擇器的值，{}代表下拉選擇器中的每個(gè)下拉內(nèi)容
selectOptions: [
{
// 此項(xiàng)被選中之后炎咖，獲取到的值
value: '選項(xiàng)1',
// 下拉框內(nèi)顯示在頁(yè)面上的選項(xiàng)
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請(qǐng)選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對(duì)應(yīng)的select的id
id: 'Select1'
}
],
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
},
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue: '',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage: '',
}
},
methods: {
// 精確搜索時(shí)候赃泡，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點(diǎn)擊的按鈕所在行的相關(guān)信息，btnId對(duì)應(yīng)的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會(huì)觸發(fā)該事件
tableSelectChange(selectValue, selectId){
// select值改變返回該select的值selectValue乘盼，以及對(duì)應(yīng)的selectId
console.log(selectValue, selectId);
},
datePickerChange(date){
// 組合搜索時(shí)間選擇器值變化時(shí)觸發(fā)事件,返回格式化后的date升熊，
console.log(date);
},
}
}
</script>
案例六：精確搜索+組合搜索(下拉選擇器搜索、時(shí)間范圍搜索)+表格(含有操作绸栅、多選功能)+表格排序+分頁(yè)
精確搜索+組合搜索(下拉選擇器搜索级野、時(shí)間范圍搜索)+表格(含有操作、多選功能)+表格排序+分頁(yè)
<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 {
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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ù)蓖柔，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段，也就是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: [
// {}代表一個(gè)下拉選擇器
{
// selectOptions：的值就是這個(gè)下拉選擇器的值风纠，{}代表下拉選擇器中的每個(gè)下拉內(nèi)容
selectOptions: [
{
// 此項(xiàng)被選中之后况鸣，獲取到的值
value: '選項(xiàng)1',
// 下拉框內(nèi)顯示在頁(yè)面上的選項(xiàng)
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請(qǐng)選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對(duì)應(yīng)的select的id
id: 'Select1'
}
],
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
},
// 儲(chǔ)存精確搜索內(nèi)的值
selectValue: '',
// 儲(chǔ)存分頁(yè)頁(yè)碼
currentPage: '',
}
},
methods: {
// 精確搜索時(shí)候，點(diǎn)擊搜索按鈕或者回車鍵(搜索框處于focus)會(huì)觸發(fā)事件
tablePreciseSearch(selectValue){
// 將搜索框的數(shù)據(jù)保留
this.selectValue = selectValue;
},
// 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā)
currentPagChange(currentPage){
// 將儲(chǔ)存分頁(yè)頁(yè)碼保留
this.currentPage = currentPage;
},
tOperateBtn(scope, btnId){
// scope是被點(diǎn)擊的按鈕所在行的相關(guān)信息竹观，btnId對(duì)應(yīng)的按鈕按鈕id
console.log(scope, btnId);
},
// 組合select選擇器值改變會(huì)觸發(fā)該事件
tableSelectChange(selectValue, selectId){
// select值改變返回該select的值selectValue镐捧，以及對(duì)應(yīng)的selectId
console.log(selectValue, selectId);
},
datePickerChange(date){
// 組合搜索時(shí)間選擇器值變化時(shí)觸發(fā)事件,返回格式化后的date潜索，
console.log(date);
},
// 當(dāng)表格的排序條件發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件
sortChange(column, prop, order){
console.log(column, prop, order);
}
}
}
</script>
ZtTable Attributes 組件的屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| 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 | 是否要高亮當(dāng)前行 | Boolean | —— | false |
| empty-text | 空數(shù)據(jù)時(shí)顯示的文本內(nèi)容，也可以通過(guò) slot="empty" 設(shè)置 | String | —— | 暫無(wú)數(shù)據(jù) |
| default-sort | 默認(rèn)的排序列的prop和順序懂酱。它的prop屬性指定默認(rèn)的排序的列竹习，order指定默認(rèn)排序的順序 | Object | order: ascending, descending | 如果只指定了prop, 沒(méi)有指定order, 則默認(rèn)順序是ascending |
| selectData | 組合搜索下拉框搜索數(shù)據(jù) | Array | —— | —— |
| tOperateData | 表格右側(cè)是操作數(shù)據(jù) | Object | —— | —— |
| isShowPagination | 是否顯示分頁(yè)功能 | Boolean | true/false | true |
| datePicker | 時(shí)間選擇器 | Object | —— | —— |
| layout | 組件布局，子組件名用逗號(hào)分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| page-size | 每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置 | Number | —— | [10, 20, 30, 40, 50, 100] |
| isShowPagination | 是否顯示分頁(yè)功能 | Boolean | true/false | true |
| isShowOperate | 是否顯示表格右側(cè)的按鈕功能 | Boolean | true/false | false |
TheadData Attributes 表格頭部屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| type | 對(duì)應(yīng)列的類型列牺。如果設(shè)置了 selection 則顯示多選框整陌；如果設(shè)置了 index 則顯示該行的索引（從 1 開(kāi)始計(jì)算 ）；如果設(shè)置了 expand 則顯示為一個(gè)可展開(kāi)的按鈕 | String | selection/index/expand | —— |
| label | 顯示的標(biāo)題 | String | —— | —— |
| prop | 對(duì)應(yīng)列內(nèi)容的字段名瞎领，也可以使用 property 屬性 | String | —— | —— |
| width | 對(duì)應(yīng)列的寬度 | String | —— | —— |
| minWidth | 對(duì)應(yīng)列的最小寬度泌辫，與 width 的區(qū)別是 width 是固定的，minWidth會(huì)把剩余寬度按比例分配給設(shè)置了 minWidth 的列 | String | —— | —— |
| fixed | 列是否固定在左側(cè)或者右側(cè)默刚，true 表示固定在左側(cè) | String, Boolean | true/left/right | —— |
| sortable | 對(duì)應(yīng)列是否可以排序甥郑，如果設(shè)置為 'custom'逃魄，則代表用戶希望遠(yuǎn)程排序荤西，需要監(jiān)聽(tīng) Table 的 sort-change 事件 | String, Boolean | true/false/'custom' | false |
| showOverflowTooltip | 當(dāng)內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示 tooltip | Boolean | —— | false |
| align | 對(duì)齊方式 | String | left/center/right | left |
| headerAlign | 表頭對(duì)齊方式，若不設(shè)置該項(xiàng)伍俘，則使用表格的對(duì)齊方式 | String | left/center/right | —— |
| className | 列的 className | String | —— | —— |
| labelClassName | 當(dāng)前列標(biāo)題的自定義類名 | String | —— | —— |
| selectable | 僅對(duì) type=selection 的列有效邪锌，類型為 Function，F(xiàn)unction 的返回值用來(lái)決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | —— | —— |
// 下面每個(gè){}代表一列的表頭數(shù)據(jù)
theadData: [
// 這個(gè)代表第一列顯示checkBox（本列根據(jù)業(yè)務(wù)需求選擇性使用）
{
type: 'selection',
width: '55',
},
// 一下是每列表頭對(duì)應(yīng)的數(shù)據(jù),
// 具體的配置請(qǐng)參考對(duì)應(yīng)的文檔配置
{
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觅丰，里面是每個(gè)Object是表格中每行的數(shù)據(jù)，每個(gè)Object的屬性是TheadData每列對(duì)應(yīng)的prop值
tbodyData: [
// {}是每一行數(shù)據(jù)妨退，這里的每個(gè)字段就代表對(duì)應(yīng)表都的字段妇萄，也就是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ù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| selectOptions | 下拉框內(nèi)的數(shù)據(jù) | Array | —— | —— |
| value | 選項(xiàng)的值 | String/Number/Object | —— | —— |
| label | 選項(xiàng)的標(biāo)簽，若不設(shè)置則默認(rèn)與 value 相同 | String/Number | —— | —— |
| selectValue | select的默認(rèn)值 | String | —— | —— |
| placeholder | 占位符 | String | —— | —— |
| span | 柵格占據(jù)的列數(shù)（總列數(shù)24） | Number | —— | —— |
selectData:[
// {}代表一個(gè)下拉選擇器
{
// selectOptions：的值就是這個(gè)下拉選擇器的值咬荷，{}代表下拉選擇器中的每個(gè)下拉內(nèi)容
selectOptions: [
{
// 此項(xiàng)被選中之后冠句，獲取到的值
value: '選項(xiàng)1',
// 下拉框內(nèi)顯示在頁(yè)面上的選項(xiàng)
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
// 初始化輸入框的值
selectValue: '',
// 占位符
placeholder: '請(qǐng)選擇',
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 對(duì)應(yīng)的select的id
id:'Select1'
},
{
selectOptions: [
{
value: '選項(xiàng)1',
label: '黃糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}
],
selectValue: '',
placeholder: '請(qǐng)選擇',
span: 4,
id:'Select2'
},
]
TOperateData Attributes 表格操作屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| type | 對(duì)應(yīng)列的類型。如果設(shè)置了 selection 則顯示多選框幸乒；如果設(shè)置了 index 則顯示該行的索引（從 1 開(kāi)始計(jì)算 ）懦底；如果設(shè)置了 expand 則顯示為一個(gè)可展開(kāi)的按鈕 | String | selection/index/expand | —— |
| label | 顯示的標(biāo)題 | String | —— | —— |
| prop | 對(duì)應(yīng)列內(nèi)容的字段名，也可以使用 property 屬性 | String | —— | —— |
| width | 對(duì)應(yīng)列的寬度 | String | —— | —— |
| minWidth | 對(duì)應(yīng)列的最小寬度罕扎，與 width 的區(qū)別是 width 是固定的聚唐，minWidth會(huì)把剩余寬度按比例分配給設(shè)置了 minWidth 的列 | String | —— | —— |
| fixed | 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) | String, Boolean | true/left/right | —— |
| sortable | 對(duì)應(yīng)列是否可以排序腔召，如果設(shè)置為 'custom'杆查，則代表用戶希望遠(yuǎn)程排序，需要監(jiān)聽(tīng) Table 的 sort-change 事件 | String, Boolean | true/false/'custom' | false |
| showOverflowTooltip | 當(dāng)內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示 tooltip | Boolean | —— | false |
| align | 對(duì)齊方式 | String | left/center/right | left |
| headerAlign | 表頭對(duì)齊方式臀蛛，若不設(shè)置該項(xiàng)根灯，則使用表格的對(duì)齊方式 | String | left/center/right | —— |
| className | 列的 className | String | —— | —— |
| labelClassName | 當(dāng)前列標(biāo)題的自定義類名 | String | —— | —— |
| selectable | 僅對(duì) type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來(lái)決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | —— | —— |
| btn | 按鈕數(shù)據(jù) | Arrary | 請(qǐng)參考下面的Btn Attributes | —— |
Btn Attributes 組合搜索時(shí)間選擇器屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| size | 類型 | String | primary,success,warning,danger,info,text | —— |
| type | 尺寸 | String | large,small,mini | —— |
| plain | 是否樸素按鈕 | Boolean | —— | false |
| disabled | 是否禁用狀態(tài) | Boolean | —— | false |
| icon | 圖標(biāo)烙肺，element-ui的圖標(biāo)庫(kù)中的圖標(biāo)名 | String | —— | —— |
| autofocus | 是否默認(rèn)聚焦 | Boolean | —— | false |
DatePicker Attributes 組合搜索時(shí)間選擇器屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| isShowDataPicker | 是否顯示時(shí)間選擇器 | Boolean | true/false | false |
| span | 柵格占據(jù)的列數(shù)（總列數(shù)24） | Number | —— | —— |
| isShowPickerOptions | 當(dāng)前時(shí)間日期選擇器特有的選項(xiàng)參考下表 | Boolean/Object | true/false/Object | false |
datePicker: {
// 柵格占據(jù)的列數(shù)（總列數(shù)24）
span: 4,
// 顯示快捷選擇
isShowPickerOptions: true,
}
Picker Options 組合搜索時(shí)間選擇器快捷的屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| shortcuts | 設(shè)置快捷選項(xiàng)纳猪，需要傳入 { text, onClick } 對(duì)象用法參考 demo 或下表 | Object[] | —— | —— |
| disabledDate | 設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期桃笙，要求返回 Boolean | Function | —— | —— |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 選中日期后會(huì)執(zhí)行的回調(diào)氏堤，只有當(dāng) daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | —— | —— |
Shortcuts 設(shè)置快捷選項(xiàng)屬性
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| text | 標(biāo)題文本 | string | —— | —— |
| onClick | 選中后的回調(diào)函數(shù)，參數(shù)是 vm搏明，可通過(guò)觸發(fā) 'pick' 事件設(shè)置選擇器的值鼠锈。例如 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: '最近一個(gè)月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三個(gè)月',
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 組件事件
| 事件名 | 說(shuō)明 | 參數(shù) |
|---|---|---|
| table-reset-value | 組合查詢或者精確查詢的搜索框存在值時(shí)才會(huì)觸發(fā)重置事件 | —— |
| date-picker-change | 組合搜索時(shí)間選擇器值變化時(shí)觸發(fā)事件 | 格式化后的date |
| table-select-change | 組合select選擇器值改變會(huì)觸發(fā)該事件 | select值改變返回該select的值selectValue |
| table-switch-search-way | 切換精確搜索和組合搜索會(huì)觸發(fā)該事件 | —— |
| on-icon-click | 點(diǎn)擊精確搜索右側(cè)的X 按鈕會(huì)觸發(fā)該事件 | —— |
| table-precise-search | 精確搜索時(shí)候，點(diǎn)擊搜索按鈕或者回車鍵(input處于focus)會(huì)觸發(fā)事件 | 當(dāng)前精確搜索框內(nèi)的值 preciseValue |
| current-change | 當(dāng)表格的當(dāng)前行發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件星著，如果要高亮當(dāng)前行购笆，請(qǐng)打開(kāi)表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| sort-change | 當(dāng)表格的排序條件發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件 | { column, prop, order } |
| select | 當(dāng)用戶手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件 | selection, row |
| select-all | 當(dāng)用戶手動(dòng)勾選全選 Checkbox 時(shí)觸發(fā)的事件 | selection |
| selection-change | 當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該事件 | selection |
| cell-mouse-enter | 當(dāng)單元格 hover 進(jìn)入時(shí)會(huì)觸發(fā)該事件 | row, column, cell, event |
| cell-mouse-leave | 當(dāng)單元格 hover 退出時(shí)會(huì)觸發(fā)該事件 | row, column, cell, event |
| cell-click | 當(dāng)某個(gè)單元格被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 | row, column, cell, event |
| cell-dblclick | 當(dāng)某個(gè)單元格被雙擊擊時(shí)會(huì)觸發(fā)該事件 | row, column, cell, event |
| row-click | 當(dāng)某一行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 | row, event, column |
| row-contextmenu | 當(dāng)某一行被鼠標(biāo)右鍵點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 | row, event |
| row-dblclick | 當(dāng)某一行被雙擊時(shí)會(huì)觸發(fā)該事件 | row, event |
| header-click | 當(dāng)某一列的表頭被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 | column, event |
| current-table-change | 當(dāng)表格的當(dāng)前行發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件，如果要高亮當(dāng)前行虚循，請(qǐng)打開(kāi)表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| size-change | pageSize 改變時(shí)會(huì)觸發(fā) | 每頁(yè)條數(shù)size |
| current-pag-change | 分頁(yè)頁(yè)碼改變時(shí)候會(huì)觸發(fā) | 當(dāng)前頁(yè)數(shù) |
| table-operate-btn | 表格右側(cè)操作按鈕 | {scop,btnId} |
