调整table组件
This commit is contained in:
@@ -4,36 +4,23 @@
|
||||
<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"
|
||||
/>
|
||||
<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 }}
|
||||
{{ 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 @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)"
|
||||
/>
|
||||
<up-checkbox
|
||||
usedAlone
|
||||
v-model:checked="item._checked" shape="square" :size="20" @change="handleRowCheck(item)"></up-checkbox>
|
||||
</view>
|
||||
|
||||
<!-- 动态列内容 -->
|
||||
@@ -49,7 +36,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
// 完全对齐 u-table2 的 props
|
||||
const props = defineProps({
|
||||
@@ -84,16 +75,20 @@ watch(
|
||||
...item,
|
||||
_checked: item._checked || false
|
||||
}));
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 全选切换
|
||||
function handleSelectAll() {
|
||||
const checked = internalAllChecked.value;
|
||||
internalData.value.forEach(item => {
|
||||
internalData.value=internalData.value.map(item=>{
|
||||
item._checked = checked;
|
||||
});
|
||||
return item;
|
||||
})
|
||||
console.log('internalData.value',internalData.value);
|
||||
emitChange();
|
||||
}
|
||||
|
||||
@@ -116,8 +111,9 @@ watch(
|
||||
const total = internalData.value.length;
|
||||
const checkedCount = internalData.value.filter(i => i._checked).length;
|
||||
internalAllChecked.value = total > 0 && checkedCount === total;
|
||||
},
|
||||
{ deep: true }
|
||||
}, {
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user