修复滚动条问题
This commit is contained in:
zouzhibing
@@ -3,6 +3,7 @@
|
||||
<uni-card title="全部功能" >
|
||||
<view style="height: 300px">
|
||||
<zb-table
|
||||
@sort-change="sortChange"
|
||||
:pullUpLoading="pullUpLoading"
|
||||
:isShowLoadMore="true"
|
||||
:highlight="true"
|
||||
@@ -19,132 +20,132 @@
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
<!-- <uni-card title="普通表格" >-->
|
||||
<!-- <view style="height: 200px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :columns="column1"-->
|
||||
<!-- :stripe="true"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<!-- <uni-card title="带边框表格" >-->
|
||||
<!-- <view style="height: 200px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :columns="column1"-->
|
||||
<!-- :stripe="true"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<!-- <uni-card title="多选，多行数据时使用 Checkbox" >-->
|
||||
<!-- <view style="height: 200px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :columns="column2"-->
|
||||
<!-- :stripe="true"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- @toggleRowSelection="toggleRowSelection"-->
|
||||
<!-- @toggleAllSelection="toggleAllSelection"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- @edit="buttonEdit"-->
|
||||
<!-- @dele="dele"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<!-- <uni-card title="固定多列和表头" >-->
|
||||
<!-- <view style="height: 200px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :columns="column3"-->
|
||||
<!-- :stripe="true"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- @toggleRowSelection="toggleRowSelection"-->
|
||||
<!-- @toggleAllSelection="toggleAllSelection"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- @edit="buttonEdit"-->
|
||||
<!-- @dele="dele"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<!-- <uni-card title="年纪、日期排序" >-->
|
||||
<!-- <view style="height: 200px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :show-header="true"-->
|
||||
<!-- :columns="column4"-->
|
||||
<!-- :stripe="true"-->
|
||||
<!-- :fit="false"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- @toggleRowSelection="toggleRowSelection"-->
|
||||
<!-- @toggleAllSelection="toggleAllSelection"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- @edit="buttonEdit"-->
|
||||
<!-- @dele="dele"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<uni-card title="普通表格" >
|
||||
<view style="height: 200px">
|
||||
<zb-table
|
||||
:columns="column1"
|
||||
:stripe="true"
|
||||
@rowClick="rowClick"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="带边框表格" >
|
||||
<view style="height: 200px">
|
||||
<zb-table
|
||||
:columns="column1"
|
||||
:stripe="true"
|
||||
@rowClick="rowClick"
|
||||
:border="true"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="多选，多行数据时使用 Checkbox" >
|
||||
<view style="height: 200px">
|
||||
<zb-table
|
||||
:columns="column2"
|
||||
:stripe="true"
|
||||
@rowClick="rowClick"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="固定多列和表头" >
|
||||
<view style="height: 200px">
|
||||
<zb-table
|
||||
:columns="column3"
|
||||
:stripe="true"
|
||||
@rowClick="rowClick"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="年纪、日期排序" >
|
||||
<view style="height: 200px">
|
||||
<zb-table
|
||||
:show-header="true"
|
||||
:columns="column4"
|
||||
:stripe="true"
|
||||
:fit="false"
|
||||
@rowClick="rowClick"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- <uni-card title="表尾合计" >-->
|
||||
<!-- <view style="height: 300px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :show-header="true"-->
|
||||
<!-- :columns="column"-->
|
||||
<!-- :fit="false"-->
|
||||
<!-- :show-summary="true"-->
|
||||
<!-- :summary-method="getSummaries"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- @toggleRowSelection="toggleRowSelection"-->
|
||||
<!-- @toggleAllSelection="toggleAllSelection"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- @edit="buttonEdit"-->
|
||||
<!-- @dele="dele"-->
|
||||
<!-- :data="data1"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<uni-card title="表尾合计" >
|
||||
<view style="height: 300px">
|
||||
<zb-table
|
||||
:show-header="true"
|
||||
:columns="column"
|
||||
:fit="false"
|
||||
:show-summary="true"
|
||||
:summary-method="getSummaries"
|
||||
@rowClick="rowClick"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data1"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- <uni-card title="上拉加载" >-->
|
||||
<!-- <view style="height: 300px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :show-header="true"-->
|
||||
<!-- :columns="column"-->
|
||||
<!-- :isShowLoadMore="true"-->
|
||||
<!-- ref="zbTable"-->
|
||||
<!-- @pullUpLoading="pullUpLoadingAction"-->
|
||||
<!-- :summary-method="getSummaries"-->
|
||||
<!-- @rowClick="rowClick"-->
|
||||
<!-- @toggleRowSelection="toggleRowSelection"-->
|
||||
<!-- @toggleAllSelection="toggleAllSelection"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- @edit="buttonEdit"-->
|
||||
<!-- @dele="dele"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<uni-card title="上拉加载" >
|
||||
<view style="height: 300px">
|
||||
<zb-table
|
||||
:show-header="true"
|
||||
:columns="column"
|
||||
:isShowLoadMore="true"
|
||||
ref="zbTable"
|
||||
@pullUpLoading="pullUpLoadingAction"
|
||||
:summary-method="getSummaries"
|
||||
@rowClick="rowClick"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
|
||||
<!-- <uni-card title="选择单行数据时使用色块表示" >-->
|
||||
<!-- <view style="height: 300px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :show-header="true"-->
|
||||
<!-- :columns="column1"-->
|
||||
<!-- @currentChange="currentChange"-->
|
||||
<!-- :highlight="true"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<uni-card title="选择单行数据时使用色块表示" >
|
||||
<view style="height: 300px">
|
||||
<zb-table
|
||||
:show-header="true"
|
||||
:columns="column1"
|
||||
@currentChange="currentChange"
|
||||
:highlight="true"
|
||||
:border="true"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- <uni-card title="支持设置单元格样式" >-->
|
||||
<!-- <view style="height: 300px">-->
|
||||
<!-- <zb-table-->
|
||||
<!-- :cell-style="cellStyle"-->
|
||||
<!-- :show-header="true"-->
|
||||
<!-- :columns="column1"-->
|
||||
<!-- @currentChange="currentChange"-->
|
||||
<!-- :highlight="true"-->
|
||||
<!-- :border="true"-->
|
||||
<!-- :data="data"></zb-table>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-card>-->
|
||||
<uni-card title="支持设置单元格样式" >
|
||||
<view style="height: 300px">
|
||||
<zb-table
|
||||
:cell-style="cellStyle"
|
||||
:show-header="true"
|
||||
:columns="column1"
|
||||
@currentChange="currentChange"
|
||||
:highlight="true"
|
||||
:border="true"
|
||||
:data="data"></zb-table>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@@ -165,7 +166,7 @@
|
||||
column:[
|
||||
{ type:'selection', fixed:true,width:60 },
|
||||
{ name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
|
||||
{ name: 'age', label: 'id',sorter:true,align:'right',fixed:false, },
|
||||
{ name: 'age', label: 'id',sorter:'custom',align:'right',fixed:false, },
|
||||
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
|
||||
{ name: 'price', label: '价格'},
|
||||
{ name: 'address', label: '地址' },
|
||||
@@ -349,6 +350,10 @@ img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-
|
||||
},3000)
|
||||
},
|
||||
methods:{
|
||||
sortChange(item,sorterMode,index){
|
||||
|
||||
console.log('触发排序',item,sorterMode,index)
|
||||
},
|
||||
cellStyle({row, column, rowIndex, columnIndex}){
|
||||
// console.log('row, column, rowIndex, columnIndex')
|
||||
if(columnIndex === 1 || columnIndex === 4) {
|
||||
|
||||
Reference in New Issue
Block a user