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">
<view class=" u-m-t-32 ">
<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> -->
<u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id"
@selection-change="handleSelectionChange($event,'now')" />

250
components/goods-table.vue
View File

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

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

@@ -126,7 +126,21 @@
let $goodsMap = {}
let goosZhonglei = 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
let minWidth=ref(36)
@@ -138,17 +152,7 @@
}
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()
watch(() => props.data.goods.length, (newval) => {