42 changed files with 1912 additions and 1616 deletions
@ -0,0 +1,280 @@
|
||||
<template> |
||||
<view class="my_table"> |
||||
<!-- 表头 --> |
||||
<view class="my_table_row my_table_head"> |
||||
<!-- 是否复选框 --> |
||||
<template v-if="props.haveSelection"> |
||||
<view class="selection td" @click.stop="handleClickAll"> |
||||
<view :class=" |
||||
{ |
||||
'checkbox':true, |
||||
'active':details.isCheckAll === 2 || details.isCheckAll === 1, |
||||
'PartialActivation': details.isCheckAll === 1 |
||||
}"> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<block v-for="item in props.columnList"> |
||||
<view class="td" :style="{width: item.width || '100px'}"> |
||||
{{item.label}} |
||||
</view> |
||||
</block> |
||||
</view> |
||||
|
||||
<!-- 表体 --> |
||||
<template v-if="props.data.length > 0"> |
||||
<view class="my_table_body"> |
||||
<block v-for="(value, index) in props.data" :key="value"> |
||||
|
||||
<view class="my_table_row my_table_data"> |
||||
<!-- 是否复选框 --> |
||||
<template v-if="props.haveSelection"> |
||||
<view class="selection td" @click.stop="()=>handleCheckItem(value, index)"> |
||||
<view :class="{'checkbox':true, 'active':value.isCheck,}"> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<block v-for="item in props.columnList" :key="item.label"> |
||||
<view class="td" :style="{width: item.width || '100px'}"> |
||||
{{value[item.prop]}} |
||||
</view> |
||||
</block> |
||||
</view> |
||||
</block> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<template v-else> |
||||
<view class="my_table_empty"> |
||||
暂无数据 |
||||
</view> |
||||
</template> |
||||
</view> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, defineProps, defineEmits, watch } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
// 表头 |
||||
columnList: { |
||||
type: Array, |
||||
required: true |
||||
}, |
||||
// 数据 |
||||
data: { |
||||
type: Array, |
||||
required: true |
||||
}, |
||||
haveSelection: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: false |
||||
} |
||||
}) |
||||
|
||||
const emits = defineEmits(['selectionChange']) |
||||
|
||||
const details = reactive({ |
||||
/** 是否全选 0 -- 全部未选, 1 -- 部分选择, 2 -- 全部选择 */ |
||||
isCheckAll: 0 as 0 | 1 | 2, |
||||
/** 被选中的数组 */ |
||||
selectionList: [] |
||||
}) |
||||
|
||||
|
||||
/** 点击全选按钮 */ |
||||
const handleClickAll = () => { |
||||
/** 全部取消 */ |
||||
const handleCheckByClose = () => { |
||||
details.isCheckAll = 0 |
||||
|
||||
for (let i = 0; i < props.data.length; i++) { |
||||
props.data[i].isCheck = false |
||||
} |
||||
|
||||
details.selectionList = [] |
||||
} |
||||
|
||||
/** 全选 */ |
||||
const handleCheckByAll = () => { |
||||
details.isCheckAll = 2 |
||||
|
||||
for (let i = 0; i < props.data.length; i++) { |
||||
props.data[i].isCheck = true |
||||
} |
||||
|
||||
details.selectionList = [...props.data] |
||||
} |
||||
|
||||
switch (details.isCheckAll) { |
||||
case 0: |
||||
handleCheckByAll() |
||||
break; |
||||
|
||||
case 1: |
||||
handleCheckByAll() |
||||
break; |
||||
|
||||
case 2: |
||||
handleCheckByClose() |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
|
||||
} |
||||
|
||||
/** 是否选中 */ |
||||
const handleIsCheck = () => { |
||||
let _flag = false |
||||
let _haveNot = false |
||||
for (let i = 0; i < props.data.length; i++) { |
||||
const item = props.data[i] |
||||
|
||||
!item.isCheck && (_haveNot = true) |
||||
item.isCheck && (_flag = true) |
||||
} |
||||
|
||||
if (!_flag) details.isCheckAll = 0 |
||||
else if (_haveNot) details.isCheckAll = 1 |
||||
else details.isCheckAll = 2 |
||||
} |
||||
|
||||
/** 点击 */ |
||||
const handleCheckItem = (value, index) => { |
||||
value.isCheck = !value.isCheck |
||||
|
||||
if (value.isCheck) { |
||||
details.selectionList.splice(index, 0, value) |
||||
} else details.selectionList.splice(index, 1) |
||||
|
||||
handleIsCheck() |
||||
} |
||||
|
||||
watch(() => props.data, () => { |
||||
console.log('123 :>> ', 123); |
||||
if (!props.haveSelection) return |
||||
handleIsCheck() |
||||
}, { deep: false, immediate: true }) |
||||
|
||||
watch(() => details.selectionList, () => { |
||||
console.log('111 :>> ', 111); |
||||
if (!props.haveSelection) return |
||||
emits('selectionChange', details.selectionList) |
||||
}, { deep: true, immediate: true }) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.my_table { |
||||
$border: 2upx solid #aaa; |
||||
|
||||
border: $border; |
||||
width: 100%; |
||||
overflow-x: scroll; |
||||
box-sizing: border-box; |
||||
color: #606266; |
||||
font-size: 0.8rem; |
||||
|
||||
.my_table_row { |
||||
width: fit-content; |
||||
min-width: 100%; |
||||
display: flex; |
||||
} |
||||
|
||||
.my_table_head { |
||||
font-weight: bold; |
||||
background-color: #f5f7fa; |
||||
border-bottom: $border; |
||||
} |
||||
|
||||
.my_table_data { |
||||
border-bottom: $border; |
||||
background-color: #fff; |
||||
font-size: 0.75rem; |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.my_table_empty { |
||||
// border-top: $border; |
||||
height: 80upx; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
|
||||
.td { |
||||
padding: 8upx; |
||||
border-right: $border; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
flex: 1; |
||||
word-break: break-all; |
||||
|
||||
&:last-child { |
||||
border: none; |
||||
} |
||||
} |
||||
|
||||
.selection { |
||||
padding: 8upx 20upx; |
||||
flex: none; |
||||
} |
||||
} |
||||
|
||||
// 全选按钮 |
||||
.checkbox { |
||||
border: 4upx solid #8d97a3; |
||||
background-color: #fff; |
||||
width: 40upx; |
||||
height: 40upx; |
||||
box-sizing: border-box; |
||||
color: #8d97a3; |
||||
border-radius: 6upx; |
||||
position: relative; |
||||
transition: all 0.3s; |
||||
|
||||
&::after { |
||||
opacity: 0; |
||||
content: ''; |
||||
border-bottom: 2px solid; |
||||
border-left: 2px solid; |
||||
position: absolute; |
||||
left: 50%; |
||||
width: 0; |
||||
height: 0; |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
// 全选 |
||||
&.active { |
||||
border-color: var(--subjectColor); |
||||
color: var(--subjectColor); |
||||
|
||||
&::after { |
||||
width: 30%; |
||||
height: 70%; |
||||
opacity: 1; |
||||
border-color: var(--subjectColor); |
||||
transform: translateX(-50%) rotateY(180deg) rotate(-45deg); |
||||
} |
||||
} |
||||
|
||||
// 部分选择 |
||||
&.PartialActivation { |
||||
|
||||
&::after { |
||||
transform: translateX(-50%) rotateY(180deg) rotate(-90deg); |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue