wms-pda迁移
This commit is contained in:
106
uni_modules/zb-table/changelog.md
Normal file
106
uni_modules/zb-table/changelog.md
Normal file
@@ -0,0 +1,106 @@
|
||||
## 1.2.18(2023-06-01)
|
||||
更新
|
||||
## 1.2.16(2023-05-10)
|
||||
增加单元格点击事件
|
||||
完善文档
|
||||
增加示例
|
||||
## 1.2.15(2022-08-25)
|
||||
优化部分细节
|
||||
## 1.2.14(2022-04-25)
|
||||
修改vue 3 报错小程序Generated an empty chunk: "uni_modules/zb-table/components/zb-table/js/util"
|
||||
## 1.2.13(2022-04-22)
|
||||
增加图片宽度设置
|
||||
## 1.2.12(2022-04-22)
|
||||
修复pc端 滚动条占位问题
|
||||
## 1.2.11(2022-04-22)
|
||||
增加多图片展示
|
||||
## 1.2.10(2022-04-19)
|
||||
版本解决冲突
|
||||
## 1.2.9(2022-04-19)
|
||||
暂时去掉多级表头...有着某些问题,正在修复中
|
||||
## 1.1.9(2022-04-19)
|
||||
暂时去掉多级表头...有着某些问题,正在修复中
|
||||
## 1.1.23(2022-04-19)
|
||||
暂时去掉多级表头,有着某些问题,修复中。。。
|
||||
## 1.1.22(2022-04-19)
|
||||
暂时去掉多级表头,存在某些问题 ,正在修复中
|
||||
## 1.1.21(2022-03-29)
|
||||
优化数字问题
|
||||
## 1.1.20(2022-03-29)
|
||||
优化按钮,可以自定义按钮,自定义添加class
|
||||
## 1.1.19(2022-03-28)
|
||||
进行优化加载
|
||||
## 1.1.18(2022-03-28)
|
||||
修复pc端滚动条问题
|
||||
## 1.1.17(2022-03-25)
|
||||
修改 数据回显的时候,全选框没有选中效果
|
||||
## 1.1.16(2022-03-25)
|
||||
新增:table属性 cell-style 修改单元格样式
|
||||
## 1.1.15(2022-03-23)
|
||||
fix:支付宝小程序上拉加载e.detail 没有值导致上拉加载失效 ,已修复
|
||||
## 1.1.14(2022-03-23)
|
||||
fix: 支付宝小程序左右无法滑动的问题
|
||||
## 1.1.13(2022-03-21)
|
||||
fix:英文宽度自适应问题
|
||||
## 1.1.12(2022-03-20)
|
||||
修改自适应宽度问题
|
||||
## 1.1.11(2022-03-19)
|
||||
增加上拉加载功能
|
||||
## 1.1.10(2022-03-18)
|
||||
修改合计不更新问题
|
||||
## 1.1.9(2022-03-16)
|
||||
优化css 样式
|
||||
## 1.1.8(2022-03-16)
|
||||
增加表尾合计行
|
||||
## 1.1.7(2022-03-15)
|
||||
修改css样式
|
||||
## 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)
|
||||
新增单击事件
|
||||
## 1.1.0(2022-03-10)
|
||||
- 增加单击事件
|
||||
|
||||
## 1.1.0(2022-03-10)
|
||||
- 增加checkbox功能 ,进行优化
|
||||
|
||||
## 1.0.11(2022-03-09)
|
||||
- 修改小程序中排序问题
|
||||
|
||||
## 1.0.10(2022-03-09)
|
||||
- 做了兼容性处理
|
||||
|
||||
## 1.0.8(2022-03-09)
|
||||
- 进行优化滚动防止 多次计算
|
||||
|
||||
## 1.0.7(2022-03-09)
|
||||
- 修改一些问题 新增过滤器
|
||||
|
||||
## 1.0.6(2022-03-08)
|
||||
- 修改样式 按钮自适应宽度
|
||||
|
||||
## 1.0.5(2022-03-08)
|
||||
- 新增按钮 修改问题
|
||||
|
||||
## 1.0.4(2022-03-04)
|
||||
- 增加空占位符"--"
|
||||
|
||||
## 1.0.3(2022-03-02)
|
||||
- 新增表格斑马纹配置、列宽配置、表头显示配置
|
||||
|
||||
## 1.0.2(2022-03-02)
|
||||
- 新增排序功能,优化样式
|
||||
|
||||
## 1.0.1(2022-03-01)
|
||||
- 可以传入动态数据,可以对左边列表进行是否固定首列
|
||||
|
||||
## 1.0.0(2022-03-01)
|
||||
- 初始化
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="uni-table-checkbox" @click.stop="selected">
|
||||
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
|
||||
<view class="checkbox__inner-icon"></view>
|
||||
</view>
|
||||
<view v-else class="checkbox__inner checkbox--indeterminate">
|
||||
<view class="checkbox__inner-icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableCheckbox',
|
||||
emits:['checkboxSelected'],
|
||||
props: {
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checked: {
|
||||
type: [Boolean,String],
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
cellData: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checked(newVal){
|
||||
if(typeof this.checked === 'boolean'){
|
||||
this.isChecked = newVal
|
||||
}else{
|
||||
this.isChecked = true
|
||||
}
|
||||
},
|
||||
indeterminate(newVal){
|
||||
this.isIndeterminate = newVal
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isChecked: false,
|
||||
isDisabled: false,
|
||||
isIndeterminate:false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(typeof this.checked === 'boolean'){
|
||||
this.isChecked = this.checked
|
||||
}
|
||||
this.isDisabled = this.disabled
|
||||
},
|
||||
methods: {
|
||||
selected() {
|
||||
if (this.isDisabled) return
|
||||
this.isIndeterminate = false
|
||||
this.isChecked = !this.isChecked
|
||||
console.log('===',this.indeterminate,this.isChecked)
|
||||
this.$emit('checkboxSelected', {
|
||||
checked: this.isChecked,
|
||||
data: this.cellData
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$checked-color: #007aff;
|
||||
$border-color: #DCDFE6;
|
||||
$disable:0.4;
|
||||
|
||||
.uni-table-checkbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
cursor: pointer;
|
||||
|
||||
// 多选样式
|
||||
.checkbox__inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
/* #ifdef APP-NVUE */
|
||||
top: 2px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 2px;
|
||||
/* #endif */
|
||||
left: 5px;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&.checkbox--indeterminate {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
height: 2px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
transform: scale(0.5);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border-color: $checked-color;
|
||||
}
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
// 选中
|
||||
&.is-checked {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="table-h5-footer top-header-uni" :style="{paddingRight:`${scrollbarSize}px`}">
|
||||
<scroll-view class="zb-table-headers"
|
||||
@scroll="handleFooterTableScrollLeft"
|
||||
scroll-x="true"
|
||||
scroll-y="false"
|
||||
id="tableFooterHeaders"
|
||||
scroll-anchoring="true"
|
||||
:scroll-left="headerFooterTableLeft"
|
||||
style="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
|
||||
class="item-th"
|
||||
:style="{
|
||||
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':''}`,
|
||||
borderTop:`${border?'1px solid #e8e8e8':''}`,
|
||||
textAlign:item.align||'left'
|
||||
}"
|
||||
v-for="(item,index) in transColumns" :key="index">
|
||||
{{ sums[index] }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import summary from '../js/summary.js'
|
||||
export default {
|
||||
name:'table-footer',
|
||||
mixins:[summary],
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-h5-footer {
|
||||
background: #fafafa;
|
||||
/*每个页面公共css */
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
//第二种
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
.item-tr{
|
||||
display: flex;
|
||||
}
|
||||
.item-th{
|
||||
padding-left: 8px;
|
||||
line-height: 39px;
|
||||
height: 40px;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
padding-right: 20px;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view class="zb-table-header" style="display: flex;" >
|
||||
<view class="item-tr" >
|
||||
<view class='item-td'
|
||||
:style="{
|
||||
width:`${item.width?item.width:'100'}px`,
|
||||
borderRight:`${border?'1px solid #e8e8e8':''}`,
|
||||
textAlign:item.align||'left'
|
||||
}"
|
||||
:key="`15255966555${index}`"
|
||||
v-for="(item,index) in fixedLeftColumns">
|
||||
<template >
|
||||
{{sums[index]}}
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import summary from '../js/summary.js'
|
||||
export default {
|
||||
mixins:[summary]
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.zb-table-header {
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
.item-th{
|
||||
padding-left: 8px;
|
||||
line-height: 39px;
|
||||
height: 40px;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.item-tr{
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item-td{
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
padding-left: 8px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background: rgb(250, 250, 250);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="zb-table-footer" style="height: 40px;">
|
||||
<view class="zb-table-fixed" >
|
||||
<view class="zb-table-thead" style="position: relative;" >
|
||||
<view class="item-tr">
|
||||
<view
|
||||
:class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side']"
|
||||
:style="{
|
||||
left:`${item.left}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':''}`,
|
||||
borderTop:`${border?'1px solid #e8e8e8':''}`,
|
||||
textAlign:item.align||'left'
|
||||
}"
|
||||
v-for="(item,index) in transColumns" :key="index">
|
||||
<template>
|
||||
{{ sums[index]||item.emptyString }}
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import summary from '../js/summary.js'
|
||||
export default {
|
||||
mixins:[summary]
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.zb-table-footer {
|
||||
background: #fafafa;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
.item-tr{
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
}
|
||||
.item-th{
|
||||
padding-left: 8px;
|
||||
line-height: 39px;
|
||||
height: 40px;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
padding-right: 20px;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.zb-table-fixed{
|
||||
min-width: 100%;
|
||||
|
||||
}
|
||||
.zb-stick-side{
|
||||
position: sticky;
|
||||
bottom:0 ;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
//border-right: solid 1rpx #dbdbdb;
|
||||
box-sizing: border-box;
|
||||
background: #fafafa;
|
||||
//box-shadow: 6px 0 6px -4px #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template >
|
||||
<view class="zb-load-more">
|
||||
<image :src="base64Flower" style="" class="loading-custom-image"></image>
|
||||
<text>正在加载中...</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const base64Flower = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEVHcEzDw8Ovr6+pqamUlJTCwsKenp61tbWxsbGysrLNzc2bm5u5ubmjo6MpovhuAAAACnRSTlMA/P79/sHDhiZS0DxZowAABBBJREFUWMPtl89rE0EUx7ctTXatB3MI1SWnDbUKPUgXqh4ED8Uf7KUVSm3ooVSpSii0Fn/gD4j4o+APiEoVmos9FO2celiqZVgwgaKHPQiCCkv+F99kM7Ozm5kxq1dfD91k9pPve9/3ZjbRNHHok/mKli4eIPNgSuRObuN9SqSEzM20iGnm0yIbqCuV7NSSSIV7uyPM6JMBYdeTOanh/QihJYZsUCSby+VkMj2AvOt0rAeQAwqE3lfKMZVlQCZk1QOCKkkVPadITCfIRNKxfoJI5+0OIFtJx14CMSg1mRSDko7VAfksRQzEbGYqxOJcVTWMCH2I1/IACNW0PWU2M8cmAVHtnH5mM1VRWtwKZjOd5JbF6s1IbaYqaotjNlPHgDAnlAizubTR6ovMYn052g/U5qcmOpi0WL8xTS/3IfSet5m8MEr5ajjF5le6dq/OJpobrdY0t3i9QgefWrxW9/1BLhk0E9m8FeUMhhXal499iD0eQRfDF+ts/tttORRerfp+oV7f4xJj82iUYm1Yzod+ZQEAlS/8mMBwKebVmCVp1f0JLS6zKd17+iwRKTARVg2SHtz3iEbBH+Q+U28zW2Jiza8Tjb1YFoYZMsJyjDqp3M9XBQdSdPLFdxEpvOB37JrHcmR/y9+LgoTlCFGZEa2sc6d4PGlweEa2JSVPoVm+IfGG3ZL037iV9oH+P+Jxc4HGVflNq1M0pivao/EopO4b/ojVCP9GjmiXOeS0DOn1o/iiccT4ORnyvBGF3yUywkQajW4Ti0SGuiy/wVSg/L8w+X/8Q+hvUx8Xd90z4oV5a1i88MbFWHz0WZZ1UrTwBGPX3Rat9AFiXRMRjoMdIdJLEOt2h7jrYOzgOamKZSWSNspOS0X8SAqRYmxRL7sg4eLzYmNehcxh3uoyud/BH2Udux4ywxFTc1xC7Mgf4vMhc5S+kSH3Y7yj+qpwIWSoPTVCOOPVthGx9FbGqrwFw6wSFxJr+17zeKcztt3u+2roAEVgUjDd+AHGuxHy2rZHaa8JMkTHEeyi85ANPO9j9BVuBRD2FY5LDMo/Sz/2hReqGIs/KiFin+CsPsYO/yvM3jL2vE8EbX7/Bf8ejtr2GLN65bioAdgLd8Bis/mD5GmP2qeqyo2ZwQEOtAjRIDH7mBKpUcMoApbZJ5UIxkEwxyMZyMxW/uKFvHCFR3SSmerHyDNQ2dF4JG6zIMpBgLfjSF9x1D6smFcYnGApjmSLICO3ecCDWrQ48geba9DI3STy2i7ax6WIB62fSyIZIiO3GFQqSURp8wCo7GhJBGwuSovJBNjb7kT6FPVnIa9qJ2Ko+l9mefGIdinaMp0yC1URYiwsdfNE45EuA5Cx9EhalfvN5s+UyItm81vaB3p4joniN+SCP7Qc1hblAAAAAElFTkSuQmCC';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
base64Flower
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.zb-load-more {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background: white;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.loading-custom-image{
|
||||
color: #a4a4a4;
|
||||
margin-right: 8rpx;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-circle 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
@keyframes loading-circle {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
uni_modules/zb-table/components/zb-table/js/summary.js
Normal file
88
uni_modules/zb-table/components/zb-table/js/summary.js
Normal file
@@ -0,0 +1,88 @@
|
||||
export default {
|
||||
props:{
|
||||
scrollbarSize:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
fixedLeftColumns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
transColumns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
border:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
showSummary:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
summaryMethod:{
|
||||
type:Function
|
||||
},
|
||||
sumText:{
|
||||
type:String,
|
||||
default:'合计'
|
||||
},
|
||||
headerFooterTableLeft:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
handleFooterTableScrollLeft:Function,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
sums:[]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'data':{
|
||||
deep:true,
|
||||
immediate:true,
|
||||
handler(newValue,oldValue){
|
||||
let sums = [];
|
||||
if (this.summaryMethod) {
|
||||
sums = this.summaryMethod({ columns: this.transColumns, data: this.data });
|
||||
} else {
|
||||
this.transColumns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = this.sumText;
|
||||
return;
|
||||
}
|
||||
const values = this.data.map(item => Number(item[column.name]));
|
||||
const precisions = [];
|
||||
let notNumber = true;
|
||||
values.forEach(value => {
|
||||
if (!isNaN(value)) {
|
||||
notNumber = false;
|
||||
let decimal = ('' + value).split('.')[1];
|
||||
precisions.push(decimal ? decimal.length : 0);
|
||||
}
|
||||
});
|
||||
const precision = Math.max.apply(null, precisions);
|
||||
if (!notNumber) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
} else {
|
||||
sums[index] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
this.sums = sums
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
51
uni_modules/zb-table/components/zb-table/js/util.js
Normal file
51
uni_modules/zb-table/components/zb-table/js/util.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 获取滚动条宽度
|
||||
*/
|
||||
let cached = undefined;
|
||||
|
||||
export const getScrollbarSize = fresh => {
|
||||
// #ifdef H5
|
||||
|
||||
if (fresh || cached === undefined) {
|
||||
let inner = document.createElement("div");
|
||||
let innerStyle = inner.style;
|
||||
|
||||
innerStyle.width = "100%";
|
||||
innerStyle.height = "200px";
|
||||
|
||||
let outer = document.createElement("div");
|
||||
let outerStyle = outer.style;
|
||||
|
||||
outerStyle.position = "absolute";
|
||||
outerStyle.top = 0;
|
||||
outerStyle.left = 0;
|
||||
outerStyle.pointerEvents = "none";
|
||||
outerStyle.width = "200px";
|
||||
outerStyle.height = "150px";
|
||||
outerStyle.visibility = "hidden";
|
||||
|
||||
outer.appendChild(inner);
|
||||
document.body.appendChild(outer);
|
||||
|
||||
// 设置子元素超出部分隐藏
|
||||
outerStyle.overflow = "hidden";
|
||||
|
||||
let width1 = inner.offsetWidth;
|
||||
|
||||
// 设置子元素超出部分滚动
|
||||
outer.style.overflow = "scroll";
|
||||
|
||||
let width2 = inner.offsetWidth;
|
||||
|
||||
if (width1 === width2) {
|
||||
width2 = outer.clientWidth;
|
||||
}
|
||||
|
||||
document.body.removeChild(outer);
|
||||
|
||||
cached = width1 - width2;
|
||||
}
|
||||
//#endif
|
||||
|
||||
return cached;
|
||||
};
|
||||
1342
uni_modules/zb-table/components/zb-table/zb-table.vue
Normal file
1342
uni_modules/zb-table/components/zb-table/zb-table.vue
Normal file
File diff suppressed because it is too large
Load Diff
81
uni_modules/zb-table/package.json
Normal file
81
uni_modules/zb-table/package.json
Normal file
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "zb-table",
|
||||
"displayName": "zb-table(多功能表格)",
|
||||
"version": "1.2.18",
|
||||
"description": "表格组件 支持固定表头和首列、上拉加载更多、及固定多列,表格自适应内容,排序,多选checkbox、可点击删除,编辑、合计功能,兼容多端",
|
||||
"keywords": [
|
||||
"table",
|
||||
"表格",
|
||||
"固定表头、固定首列、多列",
|
||||
"上拉加载更多、",
|
||||
"排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计"
|
||||
],
|
||||
"repository": "https://github.com/zouzhibin/zb-table.git",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
189
uni_modules/zb-table/readme.md
Normal file
189
uni_modules/zb-table/readme.md
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
## 介绍
|
||||
基于uni-app开发的一个普通的表格组件,功能有固定首列和表头、排序、操作按钮、
|
||||
table 表格 固定表头、固定首列、多列 上拉加载更多、 排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计
|
||||
已用于生产环境
|
||||
|
||||
微信=》 19550102670 拉进群
|
||||
## -- github 第一时间会更新到github,永远保持最新,有啥想法的可以提PR,共同开发 [地址](https://github.com/zouzhibin/zb-ui)
|
||||
|
||||
## 友情链接
|
||||
### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](https://yuanzbz.gitee.io/vue-admin-perfect/#/login?redirect=/home)
|
||||
### vue-admin-perfect —— [企业级、通用型中后台前端解决方案(基于vue3.0+TS+Element-Plus 最新版,同时支持电脑,手机,平板)](https://github.com/zouzhibin/vue-admin-perfect)
|
||||
|
||||
|
||||
## table 属性
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
|
||||
| ------ | ------ | ------ | ------ | ------ |------ |
|
||||
| data | 显示的数据 | array |-- | -- |必须 |
|
||||
| column | 显示的列数据 | array |-- | -- |必须 |
|
||||
| stripe | 是否为斑马纹 table| boolean | - |false | 否 |
|
||||
| fit | 列的宽度是否自撑开 | boolean |true,false | false |否 |
|
||||
| show-header | 是否显示表头 | boolean |true,false | true |否 |
|
||||
| cell-style | 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object |-- | -- |否 |
|
||||
| cell-header-style | 头部单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({ column, columnIndex})/Object |-- | -- |否 |
|
||||
| formatter | colomn =》formatter 必须设置为true,才有作用,进行格式化数据,进行数据的转换 | Function({row, column, rowIndex, columnIndex})/Object |-- | -- |否 |
|
||||
| border | 是否带有纵向边框 | boolean |true,false | true |否 |
|
||||
| highlight | 是否要高亮当前行 | boolean |true,false | false |否 |
|
||||
| show-summary | 是否在表尾显示合计行 | boolean |true,false | false |否 |
|
||||
| sum-text | 合计行第一列的文本 | String |- | 合计 |否 |
|
||||
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) |- | - |否 |
|
||||
| permissionBtn | 是否动态控制按钮的显示隐藏 | Function({ row, renders,index }) |- | - |否 |
|
||||
| isShowLoadMore | 是否开启上拉加载 | boolean |true,false | false |否 |
|
||||
| pullUpLoading | 开启上拉加载后的返回函数,接收参数done是函数,done(type),type为空代表还有数据,继续开启上拉加载,type='ok',代表结束上拉加载 | Function(done) |-- | -- |否 |
|
||||
|
||||
```
|
||||
关闭上拉加载的方式1:pullUpLoading((done)=>{
|
||||
done(type)
|
||||
})
|
||||
done 接收参数为 type ,type为空代表还有数据,可以继续加载,无数据的时候传入 'ok'代表结束
|
||||
```
|
||||
|
||||
## table 事件
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
|
||||
| ------ | ------ | ------ |--------------------------| ------ |------ |
|
||||
| 事件名自定义 | 取决于type类型为operation的 renders参数里面 func 的参数名 | Function | (row,index)=>{} | -- |否 |
|
||||
| sort-change | 取决于type类型为operation的 renders参数里面 func 的参数名 | Function | (column,model,index)=>{} | -- |否 |
|
||||
| currentChange | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight属性,this.$refs.table.resetHighlight()清除选中 | Function | (row,index)=>{} | -- |否 |
|
||||
| toggleRowSelection | 用于多选表格,切换某一行的选中状态,第一个参数代表选中状态,参数二代表选中的对象 | Function | (selected ,array)=>{} | -- |否 |
|
||||
| toggleAllSelection | 用于多选表格,切换所有行的选中状态 ,第一个参数代表选中状态,参数二代表选中的对象| Function | (selected ,array)=>{} | -- |否 |
|
||||
| rowClick | 单击某行 ,第一个参数代表选中对象,参数二代表选中的index| Function | (row ,index)=>{} | -- |否 |
|
||||
| cellClick | 单击单元格 ,当某个单元格被点击时会触发该事件| Function | (row ,index,column)=>{} | -- |否 |
|
||||
| pullUpLoading | 开启上拉加载后的返回函数,无参数| Function | -- |-- |否 |
|
||||
|
||||
```
|
||||
关闭上拉加载的方式2:this.$refs.zbTable.pullUpCompleteLoading('ok')
|
||||
接收参数为 type ,type为空代表还有数据,可以继续加载,无数据的时候传入 'ok'代表结束
|
||||
```
|
||||
|
||||
## data 属性
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------ | ------ | ------ | ------ | ------ |
|
||||
| checked | 是否被勾选 | boolean |true,false | 无 |
|
||||
|
||||
|
||||
## column 属性
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------ | ------ | ------ | ------ | ------ |
|
||||
| name | 属性值 | string |-- | 无 |
|
||||
| label | 显示的标题 | string |-- | 无 |
|
||||
| width | 列的宽度 | number |-- | 100 |
|
||||
| fixed | 列是否固定在左侧,true 表示固定在左侧 | boolean |true,false | true |
|
||||
| sorter | 排序,当设置为custom的时候代表自定义排序,不会再触发默认排序,会触发table事件@sort-change,可以通过接口来进行排序 | boolean |true,false,'custom' | false |
|
||||
| emptyString | 当值为空的时候默认显示的值 | string | | -- |
|
||||
| filters | 对象过滤的选项,对象格式,对象中的元素需要有 key 和 value 属性。 | Object | {key:value} | -- |
|
||||
| align | 对齐方式 | String | left/center/right | left |
|
||||
| type | 为 operation 的时候代表为操作按钮,img的时候代表图片地址,index代表序列号 | string | operation,img,index | -- |
|
||||
| renders | type 为operation的时候 必传 | Array | {name:'名字',func:"父元素接收事件名",type:"按钮的类型",size:"大小"} | -- |
|
||||
```
|
||||
type 为 operation 的时候代表为操作按钮
|
||||
renders 代表传入的按钮 Array =>[
|
||||
{
|
||||
name:'编辑',
|
||||
class:"", // 添加class
|
||||
type:'primary',代表按钮的类型 type 为custom的时候自定义按钮 其他类型取决于uniapp buttom组件按钮
|
||||
size:'mini',代表按钮的大小
|
||||
func:'edit' // func 代表操作按钮点击的事件名字 父元素接收的事件 父元素 @edit
|
||||
例如:// <zb-table @edit=""/>
|
||||
|
||||
}
|
||||
]
|
||||
```
|
||||
## 示例
|
||||
```
|
||||
<zb-table
|
||||
:show-header="true"
|
||||
:columns="column"
|
||||
:stripe="true"
|
||||
:fit="false"
|
||||
show-summary
|
||||
sum-text="合计"
|
||||
@rowClick="rowClick"
|
||||
:summary-method="getSummaries"
|
||||
@toggleRowSelection="toggleRowSelection"
|
||||
@toggleAllSelection="toggleAllSelection"
|
||||
:border="true"
|
||||
@edit="buttonEdit"
|
||||
@dele="dele"
|
||||
:data="data"></zb-table>
|
||||
```
|
||||
|
||||
## 数据格式
|
||||
```
|
||||
column:[
|
||||
{ type:'selection', fixed:true,width:50 },
|
||||
{ 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: '城市' },
|
||||
{ name: 'zip', label: '邮编' },
|
||||
{ name: 'operation', type:'operation',label: '操作',renders:[
|
||||
{
|
||||
name:'编辑',
|
||||
func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
|
||||
},
|
||||
{
|
||||
name:'删除',
|
||||
type:'warn',
|
||||
func:"dele"
|
||||
},
|
||||
]},
|
||||
],
|
||||
data:[
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎1',
|
||||
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
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎2',
|
||||
province: '上海',
|
||||
sex:'男',
|
||||
age:'18',
|
||||
city: '普陀区',
|
||||
address: '上海市普',
|
||||
zip: 200333
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎3',
|
||||
province: '上海',
|
||||
sex:'男',
|
||||
age:'18',
|
||||
city: '普陀区',
|
||||
address: '上海市普',
|
||||
zip: 200333
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎4',
|
||||
province: '上海',
|
||||
sex:'男',
|
||||
age:'18',
|
||||
city: '普陀区',
|
||||
address: '上海市普',
|
||||
zip: 200333
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎5',
|
||||
province: '上海',
|
||||
sex:'男',
|
||||
age:'18',
|
||||
city: '普陀区',
|
||||
address: '上海市普',
|
||||
zip: 200333
|
||||
}
|
||||
]
|
||||
```
|
||||
Reference in New Issue
Block a user