table表格处理

<el-table
   :data="form.tableData"
   ref="table"
   tooltip-effect="dark"
   border
   height="100%"
   @selection-change='selectRow'>
   <el-table-column
      label="项目"
      align="right">
      <el-table-column
         prop="name"
         label="数量">
         <el-table-column
            width="150"
            prop="month"
            label="月份">
            <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.taskCode'">
                   <el-input 
                      v-model="scope.row.new_exceptQuota" 
                      :disabled="requestStatus == 'detail'" 
                      clearable>
                   </el-input>
                </el-form-item>
             </template>
         </el-table-column>
      </el-table-column>
   </el-table-column>
   <el-table-column
      label="右侧大标题"
      align="center"
      :key="item">
      <el-table-column
         label="第二行第一列"
         align="center">
         <template slot-scope="scope">
            <el-form-item  :prop="'tableData.' + scope.$index + '.taskCode'">
               <el-input 
                    v-model="scope.row.new_exceptQuota" 
                    :disabled="requestStatus == 'detail'" 
                    clearable>
               </el-input>
             </el-form-item>
         </template>
      </el-table-column>
 
 
      //多个<el-table-column></el-table-column>
 
 
   </el-table-column>
</el-table>

样式部分:

/deep/ .el-table th{
    overflow: initial;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type,
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type{
    border-bottom: none;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type .cell{
    text-align: right;
}
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type .cell{
    padding-left: 0;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type .cell{
    text-align: left;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before,
/deep/ .el-table thead tr:last-of-type th:first-of-type:before{
    content: '';
    position: absolute;
    width: 1px;
    background-color: #666;
    display: block;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before {
    height: 198px; //根据情况调整
    top: 0; 
    left: 39px;  //根据情况调整
    transform: rotate(-34deg);  //根据情况调整
    transform-origin: top;
    z-index: 2;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
    height: 183px;  //根据情况调整
    bottom: 0;
    right: 0;  //根据情况调整
    transform: rotate(-54deg);  //根据情况调整
    transform-origin: bottom;
}

转自(8条消息) element table表格表头显示斜杠/斜线_meetAlice的博客-CSDN博客_element表头斜杠

上一篇:信号检测,假设检验


下一篇:瓜子前端三面