analysis/src/views/home/modules/table2.vue

<template>
    <div class="hc-datav-table-main hc-full">
        <el-table class="top-table tablebox" :data="tableData" border>
            <el-table-column prop="key1" label="项目阶段" align="center" />
            <el-table-column prop="key2" label="项目类型" align="center" />
            <el-table-column prop="key3" label="计划项目" align="center" />
            <el-table-column prop="key4" label="未制定计划项目" align="center" />
            <el-table-column prop="key5" label="按计划完成项目" align="center" />
            <el-table-column prop="key6" label="未按计划完成项目" align="center" />
        </el-table>
        <vue3-seamless-scroll class="seamless tablebox" :list="tableData" :hover="true" :limit-scroll-num="8" :step="0.4" :wheel="true" :is-watch="true">
            <el-table class="bottom-table" :data="tableData" border style="width: 100%;">
                <el-table-column prop="key1" label="项目阶段" align="center" />
                <el-table-column prop="key2" label="项目类型" align="center" />
                <el-table-column prop="key3" label="计划项目" align="center">
                    <template #default="scope">
                        <span style="color: #FF0606;" class="font-bold">{{ scope.row.key3 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="key4" label="未制定计划项目" align="center">
                    <template #default="scope">
                        <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key4 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="key5" label="按计划完成项目" align="center">
                    <template #default="scope">
                        <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key5 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="key6" label="未按计划完成项目" align="center">
                    <template #default="scope">
                        <span style="color: #10C90F;" class="font-bold">{{ scope.row.key6 }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </vue3-seamless-scroll>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
})

//监听
const tableData = ref(props.datas)
watch(() => props.datas, (val) => {
    tableData.value = val
}, { deep: true })
</script>