czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整table组件

Browse Source
This commit is contained in:
YeMingfei666
2026-03-28 18:07:30 +08:00
parent ceddc2a76a
commit c4283f0d1b
3 changed files with 140 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/change-table.vue
View File

@@ -20,7 +20,7 @@
<template v-if="form.type==1"> <template v-if="form.type==1">
<view class=" u-m-t-32 "> <view class=" u-m-t-32 ">
<view class="u-m-b-24">购物车商品</view> <view class="u-m-b-24">购物车商品</view>
<!-- <goodsTable :data="nowCartData" :columns="columnsCheck1" row-key="id" <!-- <goodsTable :data="nowCartData" :columns="columnsCheck1" row-key="id"
@selection-change="handleSelectionChange($event,'now')"></goodsTable> --> @selection-change="handleSelectionChange($event,'now')"></goodsTable> -->
<u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id" <u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id"
@selection-change="handleSelectionChange($event,'now')" /> @selection-change="handleSelectionChange($event,'now')" />

250
components/goods-table.vue
View File

@@ -1,151 +1,147 @@
<template> <template>
<view class="table u-font-28"> <view class="table u-font-28">
<!-- 表头：根据 columns 渲染 + 全选框 --> <!-- 表头：根据 columns 渲染 + 全选框 -->
<view class="u-flex u-row-between no-wrap title"> <view class="u-flex u-row-between no-wrap title">
<!-- 全选框 --> <!-- 全选框 -->
<view class="table-th"> <view class="table-th">
<my-radio <up-checkbox @change="handleSelectAll" usedAlone v-model:checked="internalAllChecked" shape="square" :size="20" />
@change="handleSelectAll" </view>
v-model="internalAllChecked"
shape="square"
:size="20"
/>
</view>
<!-- 动态列标题 --> <!-- 动态列标题 -->
<view class="table-th" v-for="col in columns" :key="col.key" :style="col.style || {}"> <view class="table-th" v-for="col in columns" :key="col.key" :style="col.style || {}">
{{ col.label }} {{ col.title }}
</view> </view>
</view> </view>
<!-- 表格行 --> <!-- 表格行 -->
<view <view @click="handleRowCheck(item)" class="u-m-t-12 u-flex u-p-24 u-row-between row"
@click="handleRowCheck(item)" v-for="(item, index) in internalData" :key="item.id || index" row-key="id">
class="u-m-t-12 u-flex u-p-24 u-row-between row" <!-- 单选框 -->
v-for="(item, index) in internalData" <view class="table-td">
:key="item.id || index" <up-checkbox
row-key="id" usedAlone
> v-model:checked="item._checked" shape="square" :size="20" @change="handleRowCheck(item)"></up-checkbox>
<!-- 单选框 --> </view>
<view class="table-td">
<my-radio
v-model="item._checked"
shape="square"
:size="20"
@change="handleRowCheck(item)"
/>
</view>
<!-- 动态列内容 --> <!-- 动态列内容 -->
<view class="table-td" v-for="col in columns" :key="col.key" :style="col.style || {}"> <view class="table-td" v-for="col in columns" :key="col.key" :style="col.style || {}">
<!-- 支持自定义渲染 / 直接取值 --> <!-- 支持自定义渲染 / 直接取值 -->
<slot v-if="col.slot" :name="col.slot" :row="item" /> <slot v-if="col.slot" :name="col.slot" :row="item" />
<template v-else> <template v-else>
{{ item[col.key] }} {{ item[col.key] }}
</template> </template>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue'; import {
ref,
computed,
watch
} from 'vue';
// 完全对齐 u-table2 的 props // 完全对齐 u-table2 的 props
const props = defineProps({ const props = defineProps({
data: { data: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
columns: { columns: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
rowKey: { rowKey: {
type: String, type: String,
default: 'id' default: 'id'
} }
}); });
// 抛出和 u-table2 一样的 selection-change 事件 // 抛出和 u-table2 一样的 selection-change 事件
const emits = defineEmits(['selection-change']); const emits = defineEmits(['selection-change']);
// 内部数据（增加选中状态 _checked） // 内部数据（增加选中状态 _checked）
const internalData = ref([]); const internalData = ref([]);
// 全选状态 // 全选状态
const internalAllChecked = ref(false); const internalAllChecked = ref(false);
// 监听外部 data 变化，自动注入选中状态 // 监听外部 data 变化，自动注入选中状态
watch( watch(
() => props.data, () => props.data,
(val) => { (val) => {
internalData.value = val.map(item => ({ internalData.value = val.map(item => ({
...item, ...item,
_checked: item._checked || false _checked: item._checked || false
})); }));
}, }, {
{ immediate: true, deep: true } immediate: true,
); deep: true
}
);
// 全选切换 // 全选切换
function handleSelectAll() { function handleSelectAll() {
const checked = internalAllChecked.value; const checked = internalAllChecked.value;
internalData.value.forEach(item => { internalData.value=internalData.value.map(item=>{
item._checked = checked; item._checked = checked;
}); return item;
emitChange(); })
} console.log('internalData.value',internalData.value);
emitChange();
}
// 行选中切换 // 行选中切换
function handleRowCheck(row) { function handleRowCheck(row) {
row._checked = !row._checked; row._checked = !row._checked;
emitChange(); emitChange();
} }
// 抛出选中结果（和 u-table2 行为一致） // 抛出选中结果（和 u-table2 行为一致）
function emitChange() { function emitChange() {
const selectedRows = internalData.value.filter(item => item._checked); const selectedRows = internalData.value.filter(item => item._checked);
emits('selection-change', selectedRows); emits('selection-change', selectedRows);
} }
// 监听所有行选中状态，自动更新全选框 // 监听所有行选中状态，自动更新全选框
watch( watch(
() => internalData.value, () => internalData.value,
() => { () => {
const total = internalData.value.length; const total = internalData.value.length;
const checkedCount = internalData.value.filter(i => i._checked).length; const checkedCount = internalData.value.filter(i => i._checked).length;
internalAllChecked.value = total > 0 && checkedCount === total; internalAllChecked.value = total > 0 && checkedCount === total;
}, }, {
{ deep: true } deep: true
); }
);
</script> </script>
<style lang="scss"> <style lang="scss">
.table { .table {
background: #f9f9f9; background: #f9f9f9;
border-radius: 8rpx; border-radius: 8rpx;
overflow: hidden; overflow: hidden;
.title { .title {
padding: 12rpx 24rpx; padding: 12rpx 24rpx;
background: #aebad2; background: #aebad2;
border-radius: 8rpx 8rpx 0 0; border-radius: 8rpx 8rpx 0 0;
color: #fff; color: #fff;
} }
.table-th, .table-th,
.table-td { .table-td {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
.row { .row {
cursor: pointer; cursor: pointer;
} }
.row:nth-of-type(2n + 1) { .row:nth-of-type(2n + 1) {
background: #f0f0f0; background: #f0f0f0;
} }
} }
</style> </style>

28
pagesOrder/index/compoents/order-item.vue
View File

@@ -126,7 +126,21 @@
let $goodsMap = {} let $goodsMap = {}
let goosZhonglei = ref(0) let goosZhonglei = ref(0)
let goodsNumber = ref(0) let goodsNumber = ref(0)
let originAmount = ref(0) let originAmount = computed(()=>{
let total=0;
for (let i in props.data.goods) {
const goods = props.data.goods[i]
if ($goodsMap.hasOwnProperty(goods.productId)) {
$goodsMap[goods.productId] += goods.num * 1
goodsNumber.value += goods.num * 1
} else {
$goodsMap[goods.productId] = goods.num * 1
goosZhonglei.value += 1
}
total += goods.payAmount
}
return total
})
const priceSize = 9 const priceSize = 9
let minWidth=ref(36) let minWidth=ref(36)
@@ -138,17 +152,7 @@
} }
function goodsMapInit() { function goodsMapInit() {
for (let i in props.data.goods) {
const goods = props.data.goods[i]
if ($goodsMap.hasOwnProperty(goods.productId)) {
$goodsMap[goods.productId] += goods.num * 1
goodsNumber.value += goods.num * 1
} else {
$goodsMap[goods.productId] = goods.num * 1
goosZhonglei.value += 1
}
originAmount.value += goods.payAmount
}
} }
goodsMapInit() goodsMapInit()
watch(() => props.data.goods.length, (newval) => { watch(() => props.data.goods.length, (newval) => {