measure/src/views/debit-pay/ledgers/payment.vue

<template>
    <hc-new-card>
        <template #header>
            <el-date-picker v-model="searchForm.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
        </template>
        <template #extra>
            <el-button hc-btn type="primary">
                <HcIcon name="download" />
                <span>导出</span>
            </el-button>
        </template>
        <div class="hc-table-ref-box no-border">
            <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
                <el-table-column prop="key1" label="合同编号" />
                <el-table-column prop="key1" label="施工单位名称" />
                <el-table-column prop="key1" label="章节" />
                <el-table-column prop="key1" label="合同金额" />
                <el-table-column prop="key1" label="变更后金额" />
                <el-table-column label="支付金额（未扣款）" align="center">
                    <el-table-column prop="key2" label="2020年08月" />
                    <el-table-column prop="key3" label="2020年09月" />
                    <el-table-column prop="key4" label="2020年10月" />
                    <el-table-column prop="key4" label="2020年11月" />
                    <el-table-column prop="key4" label="2023年03月" />
                </el-table-column>
                <el-table-column prop="key1" label="合计（元）" />
            </el-table>
        </div>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
    </hc-new-card>
</template>

<script setup>
import { onActivated, onMounted, ref } from 'vue'
defineOptions({
    name: 'DebitPayLedgersPayment',
})

//渲染完成
onActivated(() => {

})

//搜索表单
const searchForm = ref({
    current: 1, size: 10, total: 0,
})

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

const tableData = ref([
    {
        id: 1,
        key1: '2016',
        key2: '名称名称名称',
        key3: '总额',
        hasChildren: true,
    },
])
</script>

<style scoped lang="scss">

</style>