vue3通过折叠面板el-collapse、css、div封装实现体征的录入数据界面，使用了折叠面板el-collapse纯div封装的类似table的样式，增加横向，纵向滚动条

<!--作者：dingwangjun-->
<!--
 界面描述：编辑体征的录入数据界面，使用了折叠面板el-collapse纯div封装的类似table的样式
-->
<template>
    <div class="div_size_fill divSignEdit" style="padding: 5px;">
        <div style="height: 45px;line-height: 45px;width: 680px;">
            <el-button type="primary" size="mini" @click="addNewColumn">添加列</el-button>
            <el-button type="primary" size="mini" @click="submitColumn">提交</el-button>
        </div>
        <div style="height: 95%;width: 680px;border: 2px solid #D5DEFE">
            <div class="div_sign_scroll_edit">
                <!--固定列头-->
                <div class="div-inline edit_sign_div_one">
                    <div style="background: #FFFFFF;">
                        <div class="sign_left_top_location">
                            <el-collapse v-model="activeNames">
                                <div class="edit_sign_height_one">记录时间</div>
                            </el-collapse>
                        </div>
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="一致性 Consistency" name="1">
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                            </el-collapse-item>
                            <el-collapse-item title="反馈 Feedback" name="2">
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                                <div class="edit_sign_height_one">记录时间</div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
                <!--循环动态列表-->
                <div class="div-inline divSignEditSelf">
                    <div class="div-inline" v-for="i in 5" :key="i">
                        <div class="div-inline edit_sign_div_two">
                            <div class="sign_right_top_location">
                                <el-collapse v-model="activeNames">
                                    <div class="edit_sign_height_two">2021-09-13 10:48</div>
                                </el-collapse>
                            </div>
                            <el-collapse v-model="activeNames">
                                <el-collapse-item title="" name="1">
                                    <div class="edit_sign_height_two">
                                        <el-input
                                                size="small"
                                                style="width: 150px"
                                                v-model="form.tw"
                                                placeholder="请输入我很棒">
                                        </el-input>
                                    </div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                </el-collapse-item>
                                <el-collapse-item title="" name="2">
                                    <div class="edit_sign_height_two">记录时间</div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                    <div class="edit_sign_height_two">记录时间</div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import RefreshBus from '@/views/AatoBus/comBus'
    import { ref,reactive,toRefs,defineComponent,watch,computed,onMounted,onBeforeMount } from 'vue'
    export default defineComponent({
        name: '血压趋势',
        mixins: [RefreshBus],
        setup (props,content) {
            const state:any = reactive({
                activeNames: [],
                form: {
                    tw: '',
                },
            })
            onBeforeMount(()=>{
                state.activeNames = ['1','2']
            })
            onMounted(()=>{

            })
            const methods = {

            }
            return {
                ...toRefs(state),
                ...methods,
            }
        }
    })
</script>
<style lang="scss">
    .divSignEdit{
        .el-collapse-item__arrow {
            font-size: 16px;
            font-weight: bold;
            left: -140px;
            position: relative;
        }
        .el-collapse-item__header {
            height: 40px;
            background: rgba(45,90,250,.1)!important;
            border-bottom: 1px solid #D5DEFE;
            flex: 1 0 auto;
            order: -1;
            padding-left: 25px;
        }
        .el-collapse-item__content {
            padding-bottom: 0px;
        }
        .el-collapse-item__wrap {
            border-bottom: 0px solid #D5DEFE;
        }
        .el-collapse {
            border-top: 0px solid #D5DEFE;
            border-bottom: 1px solid #D5DEFE;
        }
    }
    .divSignEditSelf{
        left: 170px;
        position: sticky;
        z-index: 1000;
        .el-collapse-item__arrow{
            display: none;
        }
        .el-collapse-item__header {
            background: #FFFFFF!important;
        }
    }
    .sign_left_top_location{
        top: 0px;
        left: 0px;
        position: sticky;
        background: #FFFFFF;
        z-index: 1200;
    }
    .sign_right_top_location{
        top: 0px;
        left: 170px;
        position: sticky;
        background: #FFFFFF;
        z-index: 1200;
    }
    .div_sign_scroll_edit{
        height: 98%;
        overflow-x: auto;
        overflow-y: auto;
        white-space: nowrap;
    }
    .edit_sign_div_one{
        width: 170px;
        left: 0px;
        position: sticky;
        z-index: 1200;
        border-left: 0px solid #D5DEFE;
        border-right: 1px solid #D5DEFE;
        border-bottom: 1px solid #D5DEFE;
    }
    .edit_sign_div_two{
        width: 170px;
        border-right: 1px solid #D5DEFE;
        border-bottom: 1px solid #D5DEFE;
    }
    .edit_sign_height_one{
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
        color: #000622;
        border-bottom: 1px solid #D5DEFE;
        background: rgba(45,90,250,.1)!important;
    }
    .edit_sign_height_two{
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #D5DEFE;
    }
</style>