输入界面核心是<el-form> <el-form-item>,但是其原始版本没有表格线。平台输入表要求使用表格模式,规范及其实现方法如下:

       1、整个表格外边采用粗线。‘

            代码如下:<el-form :class="inputTable">

 .         inputTable {

             font-family: $defaultTxtFont;

              font-size: $defaultTxtSize;

             cursor: default;

              border-collapse: collapse;

               border: 2px solid #777777;

            }

        2、内部使用细线

          <el-form-item  class="inputTable_rlbt_title">

.         inputTable_rlbt_title {
             line-height: 30px;
             border-right: 1px solid #777777;
             border-bottom: 1px solid #777777;
             margin: 0 0
          }

          3、录入控件去掉边框

          <el-input class="inputTable_input">

.inputTable_input .el-input__inner {
  border: none; /* 去掉边框 */
  outline: none; /* 去掉聚焦时的边框或阴影*/
  box-shadow: none; /* 去掉聚焦时的阴影*/
  padding-left: 10px;
}

4、标题列字体

.el-form-item__label{

  font-size: $defaultTxtSize;

  color: #34b6a4 !important;

  font-weight: 700 !important;

}

         

5、标题居中

::v-deep .el-form-item--medium .el-form-item__label {
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    text-align: right;
}

6、表单整体加表头

.inputTable_tabletitle {

  display: block;

  width: 100%;

  font-family: $defaultTxtFont;

  font-size: 24px;

  color: #777777;

  font-weight: bold;

  text-align: center;

  line-height: 50px;

}