1.页面响应式配置2.设备清单页面的开发

loulijun2021

2022-06-24 a271e033ffebf9e95c9ee54fac8891814583571f

 src/views/jcsz/jsqd.vue

@@ -1,8 +1,7 @@
<template>
  <div>
    <!--    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">-->
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}">
      <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="padding: 10px 5px 0 0">
        <el-form
          ref="form"
          :model="form"
@@ -37,17 +36,19 @@
          </div>
        </el-form>
      </div>
      <div style="margin-bottom: 20px;display: flex; z-index: 2">
      <el-divider />
      <div style="margin-left: 10px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-setting" @click="settingButton">设置</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>
      </div>

      <div style="display: flex;border: 1px solid #eee">
      <el-divider />
      <div class="elTableDiv">
        <el-table
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          :style="{width: 100+'%',height:tableHeight+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -143,7 +144,7 @@

    <!--    新增修改对话框-->
    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -190,7 +191,6 @@
      width="50%"
      top="15vh"
      class="settingDialogVisible"
      @closed="handleCloseSetting"
      @close="handleCloseSetting"
    >
      <div style="margin-bottom: 20px;display: flex">
@@ -778,7 +778,7 @@
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    },
@@ -976,7 +976,7 @@
          this.$nextTick(() => {
            $('input:checkbox').eq(0).prop('checked', true)// 自定义单选框回显
          })
        }, 10)
        }, 100)
        this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
      }
      // 3.第三种情况PC未选中，APP已选中
@@ -987,7 +987,7 @@
          this.$nextTick(() => {
            $('input:checkbox').eq(1).prop('checked', true)// 自定义单选框回显
          })
        }, 10)
        }, 100)
        this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightAPPArr[0].code
      }
      // 4.第四种情况PC已选中，APP已选中
@@ -1001,7 +1001,7 @@
            $('input:checkbox').eq(0).prop('checked', true)// 自定义单选框回显
            $('input:checkbox').eq(1).prop('checked', true)// 自定义单选框回显
          })
        }, 10)
        }, 100)
        this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
      }
      this.dialogFormRight.rightOperationArr.push({
@@ -1473,11 +1473,12 @@
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;
}

.elForm {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
.body ::v-deep .el-divider{
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>