zouzhibin/zb-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
zouzhibing
2022-03-14 11:34:29 +08:00
parent 9cf7e97696
commit ebdfc6284e
12 changed files with 360 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/.gitignore generated vendored
View File

@@ -1,5 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

21
.idea/inspectionProfiles/Project_Default.xml generated
View File

@@ -1,21 +0,0 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="7">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
<item index="3" class="java.lang.String" itemvalue="noscript" />
<item index="4" class="java.lang.String" itemvalue="embed" />
<item index="5" class="java.lang.String" itemvalue="script" />
<item index="6" class="java.lang.String" itemvalue="tablecheckbox" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
</profile>
</component>

403
components/zb-table/index.vue
View File

@@ -1,26 +1,26 @@
<template>
<!-- #ifdef H5 || APP-PLUS -->
<view :class="['zb-table','zb-table-fixed-header',!border&&(bodyTableLeft>50||headerTableLeft>50)&&'scroll-left-fixed']">
<view class="zb-table-content">
<view class="zb-table-scroll" style="height: 100%;">
<template v-if="showHeader">
<view class="zb-table-header top-header-uni" style="height: 40px;">
<scroll-view class="zb-table-headers"
@scroll="handleTableScrollLeft"
scroll-x="true"
scroll-y="false"
id="tableHeaders"
scroll-anchoring="true"
:scroll-left="headerTableLeft"
style="min-width: 17px;padding-bottom: 0px;
<!-- #ifdef H5 || APP-PLUS -->
<view :class="['zb-table','zb-table-fixed-header',!border&&(bodyTableLeft>50||headerTableLeft>50)&&'scroll-left-fixed']">
<view class="zb-table-content">
<view class="zb-table-scroll" style="height: 100%;">
<template v-if="showHeader">
<view class="zb-table-header top-header-uni" style="height: 40px;">
<scroll-view class="zb-table-headers"
@scroll="handleTableScrollLeft"
scroll-x="true"
scroll-y="false"
id="tableHeaders"
scroll-anchoring="true"
:scroll-left="headerTableLeft"
style="min-width: 17px;padding-bottom: 0px;
background: #fafafa;height: 100%">
<view class="zb-table-fixed" >
<view class="zb-table-thead" style="position: relative;" >
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
:style="{
<view class="zb-table-fixed" >
<view class="zb-table-thead" style="position: relative;" >
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
:style="{
width:`${item.width?item.width:'100'}px`,
flex:index===transColumns.length-1?1:'none',
minWidth:`${item.width?item.width:'100'}px`,
@@ -28,7 +28,7 @@
borderTop:`${border?'1px solid #e8e8e8':''}`,
textAlign:item.align||'left'
}"
v-for="(item,index) in transColumns" :key="index">
v-for="(item,index) in transColumns" :key="index">
<template v-if="item.type==='selection'">
<view class="checkbox-item">
<tableCheckbox
@@ -39,27 +39,27 @@
{{ item.label }}
</template>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<template v-if="!data.length">
<view class="no-data">暂无数据~~</view>
</template>
<scroll-view class="zb-table-body" ref="tableBody" scroll-x="true" scroll-y="true" id="tableBody"
:lower-threshold="10"
:upper-threshold="10"
@scrolltoupper="(e)=>debounce(scrollToLeft)(e)" @scroll="handleBodyScroll" :scroll-left="bodyTableLeft" :scroll-top="bodyScrollTop" style=" height: calc(100% - 50px);" >
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<template v-if="!data.length">
<view class="no-data">暂无数据~~</view>
</template>
<scroll-view class="zb-table-body" ref="tableBody" scroll-x="true" scroll-y="true" id="tableBody"
:lower-threshold="10"
:upper-threshold="10"
@scrolltoupper="(e)=>debounce(scrollToLeft)(e)" @scroll="handleBodyScroll" :scroll-left="bodyTableLeft" :scroll-top="bodyScrollTop" style=" height: calc(100% - 50px);" >
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view class="item-tr"
@click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" >
<view
:style="{
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view class="item-tr"
@click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" >
<view
:style="{
width:`${ite.width?ite.width:'100'}px`,
flex:i===transColumns.length-1?1:'none',
minWidth:`${ite.width?ite.width:'100'}px`,
@@ -67,55 +67,65 @@
textAlign:ite.align||'left'
}"
:class="['item-td',showStripe(index)]"
v-for="(ite,i) in transColumns" :key="i">
<template v-if="ite.type==='operation'">
<view style="display: flex;align-items: center;height: 100%">
<view
v-for="ren,ind in ite.renders"
:key="ind"
@click.stop="$emit(ren.func,item,index)"
:style="{
:class="['item-td',showStripe(index)]"
v-for="(ite,i) in transColumns" :key="i">
<template v-if="ite.type==='operation'">
<view style="display: flex;align-items: center;height: 100%">
<view
v-for="ren,ind in ite.renders"
:key="ind"
@click.stop="$emit(ren.func,item,index)"
:style="{
display:'flex',
alignItems: 'center',
marginRight:ite.renders.length>1?'8px':'0'
}">
<button :type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button>
<button :type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button>
</view>
</view>
</template>
<template v-else-if="ite.type==='selection'">
<view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</view>
</template>
<template v-else-if="ite.type==='selection'">
<view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
</template>
<template v-else-if="ite.type==='img'">
<view class="checkbox-item">
<image
@click.stop="previewImage(item,item[ite.name],index)"
v-if="item[ite.name]"
:show-menu-by-longpress="false"
:src="item[ite.name]" style="width: 40px;height:30px; " mode="aspectFit"></image>
<text v-else>{{ite.emptyString}}</text>
</view>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="zb-table-fixed-left" v-if="isFixedLeft">
<template v-if="showHeader">
<view class="zb-table-header" style="height: 40px;display: flex">
<view class="item-tr"
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="zb-table-fixed-left" v-if="isFixedLeft">
<template v-if="showHeader">
<view class="zb-table-header" style="height: 40px;display: flex">
<view class="item-tr"
style=""
@click.stop="rowClick(item,index)"
v-for="(item,index) in fixedLeftColumns" :key="index">
<view
:style="{
<view
:style="{
width:`${item.width?item.width:'100'}px`,
borderRight:`${border?'1px solid #e8e8e8':''}`,
borderTop:`${border?'1px solid #e8e8e8':''}`,
textAlign:item.align||'left'
}"
@click.stop="sortAction(item,0)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
>
@click.stop="sortAction(item,0)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
>
<template v-if="item.type==='selection'">
<view class="checkbox-item">
<tableCheckbox
@@ -126,34 +136,34 @@
{{ item.label }}
</template>
</view>
</view>
</view>
</template>
<view class="zb-table-body-outer center-header-uni" style="height: 100%;">
<scroll-view
scroll-y="true"
id="leftTableFixed"
:upper-threshold="15"
@scrolltoupper="(e)=>scrollToFixedLeft(e)"
@scroll="leftFixedScrollAction"
:scroll-top="leftFiexScrollTop"
class="zb-table-body-inner"
style=" height: calc(100% - 50px);">
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view :class="['item-tr',showStripe(i)]"
</view>
</view>
</template>
<view class="zb-table-body-outer center-header-uni" style="height: 100%;">
<scroll-view
scroll-y="true"
id="leftTableFixed"
:upper-threshold="15"
@scrolltoupper="(e)=>scrollToFixedLeft(e)"
@scroll="leftFixedScrollAction"
:scroll-top="leftFiexScrollTop"
class="zb-table-body-inner"
style=" height: calc(100% - 50px);">
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view :class="['item-tr',showStripe(i)]"
v-for="(ite,i) in transData"
@click.stop="rowClick(ite,i)"
:key="ite.key"
style="">
<view :class="['item-td']"
:style="{
style="">
<view :class="['item-td']"
:style="{
width:`${item.width?item.width:'100'}px`,
borderRight:`${border?'1px solid #e8e8e8':''}`,
textAlign:item.align||'left'
}"
:key="index"
v-for="(item,index) in fixedLeftColumns">
:key="index"
v-for="(item,index) in fixedLeftColumns">
<template v-if="item.type==='selection'">
<view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,ite)" :cellData="ite" :checked="ite.checked"/>
@@ -164,28 +174,28 @@
</template>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 || APP-PLUS -->
<view class="zb-table-applet">
<view class="zb-table-content">
<view class="zb-table-scroll" style="height: 100%;overflow: scroll">
<template v-if="showHeader">
<view class="zb-table-header top-header-uni" style="height: 40px;">
<view class="zb-table-fixed" >
<view class="zb-table-thead" style="position: relative;" >
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side',item.sorter&&`sorting${item.sorterMode||''}`]"
:style="{
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 || APP-PLUS -->
<view class="zb-table-applet">
<view class="zb-table-content">
<view class="zb-table-scroll" style="height: 100%;overflow: scroll">
<template v-if="showHeader">
<view class="zb-table-header top-header-uni" style="height: 40px;">
<view class="zb-table-fixed" >
<view class="zb-table-thead" style="position: relative;" >
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side',item.sorter&&`sorting${item.sorterMode||''}`]"
:style="{
left:`${item.left}px`,
width:`${item.width?item.width:'100'}px`,
flex:index===transColumns.length-1?1:'none',
@@ -194,34 +204,34 @@
borderTop:`${border?'1px solid #e8e8e8':''}`,
textAlign:item.align||'left'
}"
v-for="(item,index) in transColumns" :key="index">
<template v-if="item.type==='selection'">
<view class="checkbox-item">
<tableCheckbox
:indeterminate="indeterminate" :checked="checkedAll" @checkboxSelected="checkboxSelectedAll"></tableCheckbox>
</view>
v-for="(item,index) in transColumns" :key="index">
<template v-if="item.type==='selection'">
<view class="checkbox-item">
<tableCheckbox
:indeterminate="indeterminate" :checked="checkedAll" @checkboxSelected="checkboxSelectedAll"></tableCheckbox>
</view>
</template>
<template v-else>
{{ item.label }}
</template>
</template>
<template v-else>
{{ item.label }}
</template>
</view>
</view>
</view>
</view>
</view>
</template>
<template v-if="!data.length">
<view class="no-data">暂无数据~~</view>
</template>
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view class="item-tr"
@click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" >
<view
:style="{
</view>
</view>
</view>
</view>
</view>
</template>
<template v-if="!data.length">
<view class="no-data">暂无数据~~</view>
</template>
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view class="item-tr"
@click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" >
<view
:style="{
left:`${ite.left}px`,
width:`${ite.width?ite.width:'100'}px`,
flex:i===transColumns.length-1?1:'none',
@@ -230,39 +240,47 @@
textAlign:ite.align||'left'
}"
:class="['item-td', i <fixedLeftColumns.length&&'zb-stick-side',showStripe(index)]"
v-for="(ite,i) in transColumns" :key="i">
<template v-if="ite.type==='operation'">
<view style="display: flex;align-items: center;height: 100%">
<view
v-for="ren,ind in ite.renders"
:key="ind"
@click.stop="$emit(ren.func,item,index)"
:style="{
:class="['item-td', i <fixedLeftColumns.length&&'zb-stick-side',showStripe(index)]"
v-for="(ite,i) in transColumns" :key="i">
<template v-if="ite.type==='operation'">
<view style="display: flex;align-items: center;height: 100%">
<view
v-for="ren,ind in ite.renders"
:key="ind"
@click.stop="$emit(ren.func,item,index)"
:style="{
display:'flex',
alignItems: 'center',
marginRight:ite.renders.length>1?'8px':'0'
}">
<button :type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button>
</view>
</view>
</template>
<template v-else-if="ite.type==='selection'">
<view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- #endif -->
<button :type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button>
</view>
</view>
</template>
<template v-else-if="ite.type==='selection'">
<view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</template>
<template v-else-if="ite.type==='img'">
<image
@click.stop="previewImage(item,item[ite.name],index)"
v-if="item[ite.name]"
:show-menu-by-longpress="false"
:src="item[ite.name]" style="width: 40px;height:30px; " mode="aspectFit"></image>
<text v-else>{{ite.emptyString}}</text>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from './table-checkbox.vue'
@@ -333,11 +351,14 @@ export default {
if(this.fit){
this.columns.forEach(column=>{
if(column.type==="operation"&&column.renders){
let str = column.renders.reduce((prev,next)=>{
return prev.name+next.name
let str = ''
column.renders.map((item)=>{
str+=item.name
})
column.width = this.getTextWidth(str)+column.renders.length*40
}else {
}else if(column.type==="img"){
}else if(column.type==="selection"){
}else{
let arr = [this.getTextWidth(column.label)]
this.data.forEach(data=>{
let str = (data[column.name]+'')
@@ -350,15 +371,17 @@ export default {
return this.columns
}
this.columns.forEach(item=>{
if(item.type==="operation"&&item.renders){
let str = item.renders.reduce((prev,next)=>{
return prev.name+next.name
})
if(item.type==="operation"&&item.renders&&!item.width){
let str = ''
item.renders.map((item)=>{
str+=item.name
})
item.width = this.getTextWidth(str)+item.renders.length*40
}
item.emptyString = item.emptyString||'--'
})
return this.columns
},
transData(){
this.data.forEach((item,index)=>{
@@ -403,6 +426,12 @@ export default {
mounted(){
},
methods: {
previewImage(item,url,current){
uni.previewImage({
current,
urls:[url]
})
},
rowClick(row,index){
this.$emit('rowClick',row,index)
},
@@ -514,9 +543,9 @@ export default {
sortAction(item,index){
this.$set(item,'sorterMode',item.sorterMode==='_asc'?'_desc':'_asc')
this.sortData(item)
// #ifndef H5 || APP-PLUS
this.$forceUpdate()
// #endif
// #ifndef H5 || APP-PLUS
this.$forceUpdate()
// #endif
},
@@ -691,7 +720,7 @@ export default {
padding-left: 8px;
height: 40px;
line-height: 40px;
padding-right: 20px;
padding-right: 20px;
box-sizing: border-box;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
@@ -815,7 +844,7 @@ export default {
padding-left: 8px;
height: 40px;
line-height: 40px;
padding-right:20px;
padding-right:20px;
box-sizing: border-box;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */

2
manifest.json
View File

@@ -50,7 +50,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "1535555",
"appid" : "",
"setting" : {
"urlCheck" : false
},

2
pages/index/all.js
View File

@@ -23,7 +23,6 @@ export const column2 = [
export const column3 = [
{ type:'selection', fixed:true,width:50 },
{ name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
{ name: 'name', label: '姓名',width:80,emptyString:'--' },
{ name: 'age', label: '年纪',},
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
{ name: 'address', label: '地址' },
@@ -36,7 +35,6 @@ export const column3 = [
export const column4 = [
{ type:'selection', fixed:true,width:50 },
{ name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
{ name: 'name', label: '姓名',width:80,emptyString:'--' },
{ name: 'age', label: '年纪',sorter:true},
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
{ name: 'address', label: '地址' },

28
pages/index/index.vue
View File

@@ -115,27 +115,18 @@
column3,
column4,
title: 'Hello',
renders:[
{
name:'编辑',
func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
},
{
name:'删除',
type:'warn',
func:"dele"
}
],
column:[
{ type:'selection', fixed:true,width:50 },
{ name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
{ name: 'age', label: '年纪',sorter:false,align:'right', },
{ name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
{ name: 'age', label: '年纪',sorter:true,align:'right',fixed:false, },
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
{ name: 'address', label: '地址' },
{ name: 'date', label: '日期',sorter:true },
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
{ name: 'img', label: '图片',type:"img",align: "center" },
{ name: 'operation', type:'operation',label: '操作',renders:[
{
name:'编辑',
@@ -156,6 +147,7 @@
sex:'1',
checked:true,
id:"20",
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
age:'',
city: '普陀区',
address: '上海市普上海市普上海市普上海市普',
@@ -169,7 +161,7 @@
id:"2",
age:12,
city: '普陀区',
img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
address: '上海市普',
zip: 200333
},
@@ -180,6 +172,7 @@
sex:1,
id:"3",
age:'15',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333
@@ -191,6 +184,7 @@
sex:1,
age:'11',
id:"4",
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333
@@ -201,6 +195,7 @@
province: '上海',
sex:1,
age:'14',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
id:"5",
city: '普陀区',
address: '上海市普',
@@ -212,6 +207,7 @@
sex:1,
id:"6",
age:'12',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333
@@ -223,6 +219,7 @@
age:'10',
id:"7",
city: '普陀区',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
address: '上海市普',
zip: 200333
},{
@@ -233,11 +230,13 @@
age:'29',
id:"8",
city: '普陀区',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
address: '上海市普',
zip: 200333
},{
date: '2011-05-02',
name: '王小虎9',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
province: '上海',
sex:1,
id:"9",
@@ -252,6 +251,7 @@
sex:1,
id:"10",
age:'30',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333

3
readme.md
View File

@@ -73,7 +73,9 @@ column:[
{ name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
{ name: 'age', label: '年纪',sorter:false,align:'right', },
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
{ name: 'img', label: '图片',type:"img" },
{ name: 'address', label: '地址' },
{ name: 'date', label: '日期',sorter:true },
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
@@ -98,6 +100,7 @@ column:[
sex:'男',
age:'18',
city: '普陀区',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
address: '上海市普',
zip: 200333
},

8
uni_modules/zb-table/changelog.md
View File

@@ -1,3 +1,11 @@
## 1.1.6（2022-03-14）
进行代码优化
## 1.1.5（2022-03-12）
更新一个操作按钮的时候 报错问题，进行代码优化
## 1.1.4（2022-03-12）
增加图片统一高度
## 1.1.3（2022-03-12）
增加图片地址 ，并且图片支持预览功能
## 1.1.2（2022-03-11）
新增默认 是否选中功能，进行优化
## 1.1.1（2022-03-10）

9
uni_modules/zb-table/components/zb-table/sorter.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
</template>
<script>
</script>
<style>
</style>

169
uni_modules/zb-table/components/zb-table/zb-table.vue
View File

@@ -19,9 +19,9 @@
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
class="item-th"
:style="{
width:`${item.width?item.width:'100'}px`,
width:`${item.width?item.width:'100'}px`,
flex:index===transColumns.length-1?1:'none',
minWidth:`${item.width?item.width:'100'}px`,
borderRight:`${border?'1px solid #e8e8e8':''}`,
@@ -37,6 +37,10 @@
</template>
<template v-else>
{{ item.label }}
<view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view>
</template>
</view>
</view>
@@ -52,7 +56,6 @@
:lower-threshold="10"
:upper-threshold="10"
@scrolltoupper="(e)=>debounce(scrollToLeft)(e)" @scroll="handleBodyScroll" :scroll-left="bodyTableLeft" :scroll-top="bodyScrollTop" style=" height: calc(100% - 50px);" >
<view class="zb-table-fixed">
<view class="zb-table-tbody">
<view class="item-tr"
@@ -89,6 +92,16 @@
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</template>
<template v-else-if="ite.type==='img'">
<view class="checkbox-item">
<image
@click.stop="previewImage(item,item[ite.name],index)"
v-if="item[ite.name]"
:show-menu-by-longpress="false"
:src="item[ite.name]" style="width: 40px;height:30px; " mode="aspectFit"></image>
<text v-else>{{ite.emptyString}}</text>
</view>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
@@ -114,7 +127,7 @@
textAlign:item.align||'left'
}"
@click.stop="sortAction(item,0)"
:class="['item-th',item.sorter&&`sorting${item.sorterMode||''}`]"
class="item-th"
>
<template v-if="item.type==='selection'">
<view class="checkbox-item">
@@ -124,6 +137,10 @@
</template>
<template v-else>
{{ item.label }}
<view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view>
</template>
</view>
</view>
@@ -184,7 +201,7 @@
<view class="item-tr">
<view
@click.stop="sortAction(item,index)"
:class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side',item.sorter&&`sorting${item.sorterMode||''}`]"
:class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side']"
:style="{
left:`${item.left}px`,
width:`${item.width?item.width:'100'}px`,
@@ -204,6 +221,10 @@
</template>
<template v-else>
{{ item.label }}
<view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view>
</template>
</view>
@@ -252,6 +273,14 @@
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/>
</view>
</template>
<template v-else-if="ite.type==='img'">
<image
@click.stop="previewImage(item,item[ite.name],index)"
v-if="item[ite.name]"
:show-menu-by-longpress="false"
:src="item[ite.name]" style="width: 40px;height:30px; " mode="aspectFit"></image>
<text v-else>{{ite.emptyString}}</text>
</template>
<template v-else>
{{ ite.filters?itemFilter(item,ite):item[ite.name]||ite.emptyString }}
</template>
@@ -304,13 +333,18 @@ export default {
computed:{
fixedLeftColumns(){
let arr = []
let number = 0
for(let i=0;i<this.columns.length;i++){
let item = this.columns[i]
if(item.fixed){
if(i===0){
item.left = 0
number+=item.width
}else {
item.left = this.columns[i-1].width
console.log('===',i,number)
item.left = number
number+=item.width
}
arr.push(item)
}else {
@@ -333,11 +367,14 @@ export default {
if(this.fit){
this.columns.forEach(column=>{
if(column.type==="operation"&&column.renders){
let str = column.renders.reduce((prev,next)=>{
return prev.name+next.name
let str = ''
column.renders.map((item)=>{
str+=item.name
})
column.width = this.getTextWidth(str)+column.renders.length*40
}else {
}else if(column.type==="img"){
}else if(column.type==="selection"){
}else{
let arr = [this.getTextWidth(column.label)]
this.data.forEach(data=>{
let str = (data[column.name]+'')
@@ -350,15 +387,17 @@ export default {
return this.columns
}
this.columns.forEach(item=>{
if(item.type==="operation"&&item.renders){
let str = item.renders.reduce((prev,next)=>{
return prev.name+next.name
})
if(item.type==="operation"&&item.renders&&!item.width){
let str = ''
item.renders.map((item)=>{
str+=item.name
})
item.width = this.getTextWidth(str)+item.renders.length*40
}
item.emptyString = item.emptyString||'--'
})
return this.columns
},
transData(){
this.data.forEach((item,index)=>{
@@ -403,6 +442,12 @@ export default {
mounted(){
},
methods: {
previewImage(item,url,current){
uni.previewImage({
current,
urls:[url]
})
},
rowClick(row,index){
this.$emit('rowClick',row,index)
},
@@ -653,6 +698,32 @@ export default {
</style>
<style lang="scss" scoped>
.sorter-table{
position: absolute;
right: 6px;
top:50%;
transform:translateY(-50%);
.sorter-table-icon{
width: 0;
height: 0;
color: #dcdcdc;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.sorter-table-icon:first-child{
border-bottom: 5px solid currentColor;
}
.sorter-table-icon:last-child{
margin-top: 1.5px;
border-top: 5px solid currentColor;
}
.sorting_desc{
color: #2979ff;
}
.sorting_asc{
color: #2979ff;
}
}
.checkbox-item{
display: flex;align-items: center;justify-content: center;width: 100%;height: 100%
}
@@ -664,6 +735,20 @@ export default {
align-items: center;
border-bottom: 1px solid #e8e8e8;
}
.item-th{
position: relative;
flex-shrink: 0;
width: 100px;
overflow-wrap: break-word;
border-bottom: 1px solid #e8e8e8;
transition: background 0.3s;
padding-right: 20px;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word;
}
.zb-table{
height: 100%;
overflow: hidden;
@@ -701,19 +786,7 @@ export default {
border-bottom: 1px solid #e8e8e8;
//transition: background 0.3s;
}
.item-th{
flex-shrink: 0;
width: 100px;
overflow-wrap: break-word;
border-bottom: 1px solid #e8e8e8;
transition: background 0.3s;
padding-right: 20px;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word;
}
.zb-table-fixed-left .zb-table-header{
overflow-y: hidden;
}
@@ -724,6 +797,8 @@ export default {
padding-left: 8px;
line-height: 39px;
height: 40px;
//display: flex;
//align-items: center;
box-sizing: border-box;
}
}
@@ -746,7 +821,6 @@ export default {
height: 100%;
//transition: box-shadow 0.3s ease;
}
.odd{
background-color:rgba(249,249,249,0.6);
//height: 100%;
@@ -764,28 +838,6 @@ export default {
box-shadow: 6px 0 6px -4px #ccc;
}
}
.sorting{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczRkE5Qjk2OTQwNDExRTk4NUU3RUY3OTQwOUYzOUU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczRkE5Qjk3OTQwNDExRTk4NUU3RUY3OTQwOUYzOUU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzNGQTlCOTQ5NDA0MTFFOTg1RTdFRjc5NDA5RjM5RTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzNGQTlCOTU5NDA0MTFFOTg1RTdFRjc5NDA5RjM5RTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4R7rKqAAAAWklEQVR42mL8//8/AzUBEwOVwaiB2MHdu3f/gzBVDEQ2iBhDmYg1jFhDmUgxjBg5xkGfsFnI8RYIKCsrM5LkQlwaCMkxkeoKfIYRFYbIBhAybGjE8gg0ECDAAI+ULEsz8LFkAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: center right;
background-size: 20px 20px;
cursor: pointer;
}
.sorting_asc{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlDMzQ5NTk4OTQwNDExRTk4ODYwRkRDNTNBRUE5MTc1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlDMzQ5NTk5OTQwNDExRTk4ODYwRkRDNTNBRUE5MTc1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUMzNDk1OTY5NDA0MTFFOTg4NjBGREM1M0FFQTkxNzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUMzNDk1OTc5NDA0MTFFOTg4NjBGREM1M0FFQTkxNzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4u6TUfAAAAdElEQVR42mL8//8/AzUBEwOVweA3kIVUDdJbp8LZT72zyXMh0JD/IIzLEJIMhBmEzMZnKCO+ZINsGDIAGshIsgtxGUZIjnHQJ2ycyebu3bt4na6srMxIkgtxaSAkx0SqK/AZRlQYIhtAyLChEcsj0ECAAAMABS4rJ0ADXJ8AAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center right;
background-size: 20px 20px;
cursor: pointer;
}
.sorting_desc{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg1MjMyQjFCOTQwNDExRTk5NjhDQjc2MEYxQzUxNkEzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg1MjMyQjFDOTQwNDExRTk5NjhDQjc2MEYxQzUxNkEzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODUyMzJCMTk5NDA0MTFFOTk2OENCNzYwRjFDNTE2QTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODUyMzJCMUE5NDA0MTFFOTk2OENCNzYwRjFDNTE2QTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz69xJt+AAAAaElEQVR42mL8//8/AzUBEwOVwaiB2MHdu3f/gzBVDEQ2iBhDmYg1jFhDmUgxjBg5xkGfsFlwSUhvnYrX6U+9sxlJciEuDYTkmEh1BUwM6APywhDZUHwuIxiG+FyKy3VDI9kMfgMBAgwAP+E336XXjQcAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center right;
background-size: 20px 20px;
cursor: pointer;
}
.zb-table-applet{
height: 100%;
overflow: hidden;
@@ -825,36 +877,24 @@ export default {
border-bottom: 1px solid #e8e8e8;
//transition: background 0.3s;
}
.item-th{
flex-shrink: 0;
width: 100px;
overflow-wrap: break-word;
border-bottom: 1px solid #e8e8e8;
transition: background 0.3s;
padding-right: 20px;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word;
}
.zb-table-header {
//overflow: hidden;
position: sticky;
top: 0;
z-index: 1;
z-index: 2;
width: fit-content;
background: #fafafa;
.item-th{
padding-left: 8px;
line-height: 39px;
height: 40px;
box-sizing: border-box;
background: #fafafa;
}
.zb-stick-side{
position: sticky;
top: 0;
left: 0;
z-index: 2;
//border-right: solid 1rpx #dbdbdb;
box-sizing: border-box;
background: #fafafa;
@@ -900,6 +940,7 @@ export default {
.zb-stick-side{
position: sticky;
left: 0;
z-index: 1;
box-sizing: border-box;
background:white;
//box-shadow: 6px 0 6px -2px #ccc;

2
uni_modules/zb-table/package.json
View File

@@ -1,7 +1,7 @@
{
"id": "zb-table",
"displayName": "zb-table（多功能表格）",
"version": "1.1.2",
"version": "1.1.6",
"description": "表格组件 支持固定表头和首列、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑功能、兼容多端",
"keywords": [
"table",

4
uni_modules/zb-table/readme.md
View File

@@ -38,7 +38,7 @@
| emptyString | 当值为空的时候默认显示的值 | string | | -- |
| filters | 对象过滤的选项，对象格式，对象中的元素需要有 key 和 value 属性。 | Object | {key:value} | -- |
| align | 对齐方式 | String | left/center/right | left |
| type | 为 operation 的时候代表为操作按钮 | string | operation | -- |
| type | 为 operation 的时候代表为操作按钮,img的时候代表图片地址 | string | operation,img | -- |
| renders | type 为operation的时候 必传 | Array | {name:'名字',func:"父元素接收事件名",type:"按钮的类型",size:"大小"} | -- |
```
type 为 operation 的时候代表为操作按钮
@@ -75,6 +75,7 @@ column:[
{ name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
{ name: 'age', label: '年纪',sorter:false,align:'right', },
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
{ name: 'img', label: '图片',type:"img" },
{ name: 'address', label: '地址' },
{ name: 'date', label: '日期',sorter:true },
{ name: 'province', label: '省份' },
@@ -99,6 +100,7 @@ column:[
province: '上海',
sex:'男',
age:'18',
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
city: '普陀区',
address: '上海市普',
zip: 200333