<!--作者：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>版权声明：本文为qq_28813031原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。