Răsfoiți Sursa

更新页面表格示例样式

dengshaobo 1 an în urmă
părinte
comite
92032d5ae5
2 a modificat fișierele cu 129 adăugiri și 972 ștergeri
  1. 8 968
      src/styles/common.scss
  2. 121 4
      src/views/manager/index.vue

+ 8 - 968
src/styles/common.scss

@@ -96,48 +96,7 @@ body {
 
 
 
-.el-popup-parent--hidden {
-  padding-right: 0px !important;
-}
-
-.LoginItem .login-form .el-input__prefix {
-  .el-icon-user:before,
-  .el-icon-lock:before,
-  .el-icon-arrow-left:before {
-    font-size: 16px !important;
-  }
-}
-
-.LoginItem .el-select,
-.LoginItem .el-input,
-.LoginItem .el-input__inner,
-.emailNoLogin .el-input,
-.emailNoLogin .el-input__inner {
-  height: 53px !important;
-}
-
-.el-table .caret-wrapper {
-  height: 34px;
-  width: 16px;
-}
-
-.el-input-group__append {
-  width: 36px !important;
-  height: 100%;
-  padding: 0 !important;
-  text-align: center;
-}
-
-// .el-input-group__append button {
-//   padding: 0 !important;
-// }
-
 
-// 全局筛选下拉列表icon颜色调整
-.el-select .el-input .el-select__caret
-{
-  color:#999999;
-}
 // 全局滚动条样式修改
 /* 滚动条轨道区域样式 */
 ::-webkit-scrollbar {
@@ -186,50 +145,6 @@ body {
   /* 不设置 font-family,浏览器使用默认字体 */
 }
 
-//左右切换按钮样式
-.right_user_tab {
-  width: calc(100% - 40px);
-  margin: auto;
-  display: flex;
-  margin-top: 20px;
-
-  .tab_system_user {
-    width: 50%;
-    height: 34px;
-    line-height: 34px;
-    text-align: center;
-    border-radius: 4px 0px 0px 4px;
-    cursor: pointer;
-    border: 1px solid #bbbbbb;
-    font-weight: 400;
-    font-size: 16px;
-    color: #bbbbbb;
-    cursor: pointer;
-  }
-
-  .tab_temporay_user {
-    width: 50%;
-    height: 34px;
-    border-radius: 0px 4px 4px 0px;
-    line-height: 34px;
-    text-align: center;
-
-    border: 1px solid #bbbbbb;
-    font-weight: 400;
-    font-size: 16px;
-    color: #bbbbbb;
-    cursor: pointer;
-  }
-
-  .select_cur {
-    background: #2e64fa;
-    font-weight: 400;
-    font-size: 16px;
-    color: #ffffff;
-    cursor: pointer;
-    border: 1px solid #2e64fa;
-  }
-}
 
 .page_tree {
   width: 100%;
@@ -269,195 +184,12 @@ body {
   }
 }
 
-@media screen and (max-width: 1400px) {
-  .layoutMain,
-  .headerBox {
-    width: 100%;
-  }
-
-  // .layoutMain,.headerBox{
-  //   width:1260px;
-  // }
-}
-
-@media screen and (min-width: 1401px) {
-  .layoutMain,
-  .headerBox {
-    width: 100%;
-  }
-}
-
-.layoutCon {
-  flex: 1;
-  overflow: hidden;
-}
-
-//ckeditor  reset css
-.ck-powered-by-balloon {
-  display: none !important;
-}
-
-
-body {
-  font-size: 14px;
-  color: #303133;
-  -webkit-font-smoothing: antialiased;
-}
-
-.fl {
-  float: left;
-}
-
-.fr {
-  float: right;
-}
-
-//extend
-.fs12 {
-  font-size: 12px;
-}
-
-.fs14 {
-  font-size: 14px;
-}
-
-.fs16 {
-  font-size: 16px;
-}
-
-.fs18 {
-  font-size: 18px;
-}
-
-.fs20 {
-  font-size: 20px;
-}
-
-.fs24 {
-  font-size: 24px;
-}
-
-.fs30 {
-  font-size: 30px;
-}
-
-.tl {
-  text-align: left;
-}
-
-.tc {
-  text-align: center;
-}
-
-.tr {
-  text-align: right;
-}
-
-.lh18 {
-  line-height: 18px;
-}
-
-.lh22 {
-  line-height: 22px;
-}
-
-.lh24 {
-  line-height: 24px;
-}
-
-.lh28 {
-  line-height: 28px;
-}
-
-.lh30 {
-  line-height: 30px;
-}
-
-.lh46 {
-  line-height: 46px;
-}
-
-.mt5 {
-  margin-top: 5px;
-}
-
-.mt10 {
-  margin-top: 10px;
-}
-
-.mt15 {
-  margin-top: 15px;
-}
-
-.mt20 {
-  margin-top: 20px;
-}
-
-.mt30 {
-  margin-top: 30px;
-}
-
-.ml10 {
-  margin-left: 10px;
-}
-
-.ml15 {
-  margin-left: 15px;
-}
-
-.ml20 {
-  margin-left: 20px;
-}
-
-.p0 {
-  padding: 0;
-}
 
-.p20 {
-  padding: 20px;
-}
-
-.pl8 {
-  padding-left: 8px;
-}
-
-.fbRegular {
-  font-weight: normal;
-}
-
-.fb {
-  font-weight: bold;
-}
 
-.fwMedium {
-  font-weight: 500;
-}
 
-.fbd {
-  font-weight: 700;
-}
 
-.vSpace16 {
-  margin: 0 auto;
-  height: 16px;
-}
 
-.colorBtnRed {
-  color: #f56c6c;
-}
 
-// / 最多俩行多出...
-.ellipsis2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  white-space: normal;
-  word-break: break-all;
-  word-wrap: break-word;
-  text-align: justify;
-}
 .page_jg_10 {
   width: 100%;
   height: 10px;
@@ -1548,709 +1280,17 @@ body {
   }
 }
 
-//答题卡纸张页面表格样式  page_table 42px
-.page_table_dtk {
-  width: calc(100% - 40px);
-  margin: auto;
-
-  .el-table {
-    border-radius: 4px;
-  }
-
-  .el-table .el-table__header {
-    height: 42px;
-  }
-
-  //表格顶部标题栏
-  .el-table tr th.el-table__cell {
-    background-color: #f0f2f5;
-    font-size: 16px;
-    color: #303133;
-    font-weight: 600;
-  }
-
-  .el-table .el-table__cell {
-    height: 42px !important;
-    padding: 0 !important;
-  }
-
-  .table_row_title {
-    width: 100%;
-    overflow: hidden;
-    /* 隐藏超出容器的内容 */
-    white-space: nowrap;
-    /* 保持文本在一行内 */
-    text-overflow: ellipsis;
-    /* 超出部分显示省略号 */
-    cursor: pointer;
-  }
-
-  .el-table th.el-table__cell.is-leaf,
-  .el-table td.el-table__cel {
-    border-bottom: 0px solid red;
-  }
-
-  .el-table--border .el-table__cell {
-    border-bottom: 1px solid #ebeef5 !important;
-    border-right: 1px solid #ebeef5 !important;
-  }
-}
-
-//右侧栏表格样式
-.right_table {
-  width: calc(100% - 40px);
-  margin: auto;
-
-  .el-table {
-    border-radius: 4px;
-  }
-
-  .el-table .el-table__header {
-    height: 40px;
-  }
-
-  //表格顶部标题栏
-  .el-table tr th.el-table__cell {
-    background-color: #f0f2f5;
-    font-size: 16px;
-    color: #303133;
-    font-weight: 600;
-  }
-
-  .el-table__body tr {
-    cursor: pointer;
-  }
-
-  /* 移除 el-table 的悬浮效果 */
-  .el-table__body tr:hover > td {
-    background-color: transparent !important;
-  }
-
-  .el-table .cell {
-    padding: 0 !important;
-  }
-
-  .el-table .el-table__cell {
-    height: 40px;
-    padding: 0 !important;
-  }
-
-  .table_row_title {
-    width: 100%;
-    overflow: hidden;
-    /* 隐藏超出容器的内容 */
-    white-space: nowrap;
-    /* 保持文本在一行内 */
-    text-overflow: ellipsis;
-    /* 超出部分显示省略号 */
-    cursor: pointer;
-  }
-
-  .table_row_value {
-    width: 100%;
-    overflow: hidden;
-    /* 隐藏超出容器的内容 */
-    white-space: nowrap;
-    /* 保持文本在一行内 */
-    text-overflow: ellipsis;
-    /* 超出部分显示省略号 */
-    cursor: pointer;
-  }
-
-  .row_scan_status {
-    width: 100%;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    .no_scan_btn {
-      font-weight: 400;
-      font-size: 14px;
-      color: #666666;
-      text-align: center;
-    }
 
-    .yes_scan_btn {
-      width: 54px;
-      height: 24px;
-      border-radius: 4px 4px 4px 4px;
-      border: 1px solid #2bc644;
-      font-weight: 400;
-      font-size: 14px;
-      color: #2bc644;
-      line-height: 24px;
-    }
 
-    //重号
-    .repeat_scan_btn {
-      width: 54px;
-      height: 24px;
-      border-radius: 4px 4px 4px 4px;
-      border: 1px solid #f56c6c;
-      font-weight: 400;
-      font-size: 14px;
-      color: #f56c6c;
-      line-height: 24px;
-    }
+//页面公共样式
+.page_item {
+  width: 100%;
+  background: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing:border-box;
+  
 
-    //认领
-    .claim_scan_btn {
-      width: 54px;
-      height: 24px;
-      border-radius: 4px 4px 4px 4px;
-      border: 1px solid #2e64fa;
-      font-weight: 400;
-      font-size: 14px;
-      color: #2e64fa;
-      line-height: 24px;
-    }
-  }
-
-  //选中行的背景色和字体颜色
-  .el-table .selected_row {
-    background-color: #d5e0fe;
-    /* 选中行的背景色 */
-    color: #2e64fa;
-    /* 选中行的文字颜色 */
-  }
-}
-
-//答案列表表格样式
-.answer_table {
-  width: calc(100% - 40px);
-  margin: auto;
-
-  .el-table {
-    border-radius: 4px;
-  }
-
-  .el-table .el-table__header {
-    height: 36px;
-  }
-
-  //表格顶部标题栏
-  .el-table tr th.el-table__cell {
-    background-color: #f0f2f5;
-    font-size: 16px;
-    color: #303133;
-    font-weight: 600;
-  }
-
-  .el-table .el-table__cell {
-    height: 32px;
-    padding: 0 !important;
-  }
-
-  // .el-table--striped
-  //   .el-table__body
-  //   tr.el-table__row--striped
-  //   td.el-table__cell {
-  //   background-color: transparent;
-  // }
-
-  .table_row_answer_choose {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    gap: 12px;
-    .answer_item {
-      width: 36px;
-      height: 20px;
-      font-weight: 500;
-      font-size: 12px;
-      color: #666666;
-      background: #ffffff;
-      border-radius: 0px 0px 0px 0px;
-      border: 1px solid #909399;
-      line-height: 18px;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .choose {
-      border: 1px solid #2e64fa;
-      background: #2e64fa;
-      color: #fff;
-    }
-
-    .input_error
-    {
-      border:1px solid red;
-      border-radius: 4px;
-    }
-
-    .el-input
-    {
-      height: 32px;
-      line-height: 32px;
-    }
-    .el-input__inner
-    {
-      height: 32px;
-      line-height: 32px;
-    }
-
-    .score_count_append
-    {
-      width: 44px;
-      height: 20px;
-      
-      line-height: 20px;
-      color:#C0C4CC;
-    }
-  }
-
-  .answer_cur_row_bg {
-    background-color: rgba(245, 108, 108, 0.2);
-
-    .el-table--border .el-table__cell:first-child .cell {
-      background-color: rgba(245, 108, 108, 0.2);
-    }
-  }
-
-  //成绩纠错 表格 题目名称样式
-  .table_row_question_name
-  {
-    font-size: 14px;
-    color:#666;
-  }
-
-  //成绩纠错 表格 修改后样式
-  .table_row_question_update
-  {
-    font-size: 14px;
-    color:#F56C6C;
-  }
-}
-
-//页面公共样式
-.page_item {
-  width: 100%;
-  background: #f0f4fb;
-  display: flex;
-  justify-content: center;
-
-  .make_card_content {
-    width: calc(100% - 40px);
-    height: calc(100% - 40px);
-    overflow: hidden;
-    margin: auto;
-    border-bottom: none;
-    border-top: none;
-    position: relative;
-  }
-
-  .make_card_dtk {
-    // width:900px;
-    // max-width: calc(100% - 400px);
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    // float: left;
-    font-size: 14px;
-    position: relative;
-    background-color: #ccc;
-    text-align: center;
-  }
-
-  // 答题卡区域内容曾  实际纸张打印部分
-  .answer_sheet_content {
-    width: 210mm;
-    height: 297mm;
-    margin: auto;
-    border: 1px solid #000;
-    z-index: 5;
-    background-color: white;
-
-    position: relative;
-  }
-
-  .answer_sheet_bottom {
-    width: 100%;
-    height: 20px;
-    position: absolute;
-    top: 608mm;
-  }
-
-  //右侧
-  .aside_left {
-    font-family: Merriweather Sans, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    -webkit-font-smoothing: antialiased;
-    background: #fff;
-    position: relative;
-    min-width: 400px;
-    width: 400px;
-    border-radius: 10px 10px 10px 10px;
-    margin-left: 20px;
-    margin-right: 20px;
-    overflow-y: auto;
-    // overflow-x: hidden;
-  }
-
-  .bar-title {
-    margin: 0;
-    padding-left: 20px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-    background-color: blue;
-    height: 44px;
-    line-height: 44px;
-    cursor: pointer;
-  }
-
-  .bar_title {
-    margin: 0;
-    padding-left: 20px;
-    height: 44px;
-    line-height: 44px;
-    font-weight: 600;
-    font-size: 16px;
-    color: #303133;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-  }
-
-  .paper_button_height {
-    width: 100%;
-    height: 160px;
-  }
-  .paper_button {
-    margin: auto;
-    min-height: 110px;
-    width: 400px;
-    position: absolute;
-    right: 20px;
-    bottom: 0px;
-    background-color: white;
-    padding-top: 20px;
-    z-index: 1999;
-  }
-  .paper_mark {
-    width: calc(100% - 20px);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-    min-height: 38px;
-    line-height: 38px;
-    margin-bottom: 10px;
-
-    .dtk_label {
-      width: 100px;
-      margin-left: 20px;
-      font-weight: 400;
-      font-size: 14px;
-      color: #303133;
-      line-height: 16px;
-      text-align: left;
-      font-style: normal;
-      text-transform: none;
-    }
-
-    .dtk_val_layout {
-      width: calc(100% - 90px);
-
-      .el-radio-group {
-        display: flex;
-        justify-content: flex-start;
-
-        gap: 0px;
-      }
-      .is-checked {
-        border: 1px solid #2e64fa !important;
-      }
-      .paper_layout {
-        width: 70px;
-        height: auto;
-        border-radius: 4px 4px 4px 4px;
-
-        border: 1px solid #dcdfe6;
-        padding: 5px 5px;
-        display: flex;
-        justify-content: space-between;
-        .el-radio__input {
-          width: 20px;
-
-          border: none !important;
-        }
-        .el-radio__label {
-          width: 90px;
-        }
-
-        .layout_title {
-          width: 100%;
-          font-weight: 400;
-          font-size: 14px;
-          color: #666666;
-        }
-
-        .layout_img {
-          width: 39px;
-          height: 20px;
-          margin-top: 5px;
-          margin-right: 5px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-
-    .dtk_val {
-      margin-left: 10px;
-      font-size: 14px;
-      display: flex;
-      justify-content: flex-start;
-      width: calc(100% - 90px);
-
-      .el-radio-group {
-        display: flex;
-        justify-content: flex-start;
-
-        gap: 10px;
-
-        .el-radio__label {
-          padding: 5px !important;
-        }
-      }
-      .el-input__inner {
-        // color:red;
-        font-size: 14px;
-      }
-      .el-radio {
-        height: 36px;
-        line-height: 36px !important;
-      }
-    }
-  }
-
-  .mark_item_box {
-    width: calc(100% - 40px);
-    margin: 0px 0px 10px 20px;
-
-    .add_btn {
-      width: calc((100% - 20px) / 3);
-      height: 30px;
-      border-radius: 6px 6px 6px 6px;
-      border: 1px solid #dcdfe6;
-      font-size: 14px;
-
-      .btn_icon {
-        font-size: 16px;
-        margin-right: 5px;
-      }
-    }
-  }
-
-  .button_content {
-    width: calc(100% - 40px);
-    margin: auto;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 20px;
-    .btn_yulan {
-      width: calc(50% - 10px);
-      height: 36px;
-      line-height: 36px;
-      padding: 0;
-      color: #2e64fa;
-      text-align: center;
-      font-size: 14px;
-      font-weight: 600;
-      background: #fafafa;
-      border-radius: 6px 6px 6px 6px;
-      border: 1px solid #2e64fa;
-      cursor: pointer;
-    }
-
-    .btn_cancel {
-      width: calc(50% - 10px);
-      height: 36px;
-      line-height: 36px;
-      padding: 0;
-      color: #666666;
-      text-align: center;
-      font-size: 14px;
-      font-weight: 600;
-      background: #fafafa;
-      border-radius: 6px 6px 6px 6px;
-      border: 1px solid #ebeef5;
-      cursor: pointer;
-    }
-
-    .btn_save {
-      width: 100%;
-      border-radius: 4px 4px 4px 4px;
-      height: 36px;
-      background: #2e64fa;
-      padding: 0;
-      line-height: 36px;
-    }
-  }
-  .button_between {
-    display: flex;
-    justify-content: space-between;
-  }
-  .mark-item-box {
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    .el-button {
-      margin-bottom: 4px;
-      margin-left: 0;
-    }
-    .add-btn {
-      width: 107px;
-      border-radius: 6px;
-    }
-  }
-  .btn-wrap {
-    .el-button {
-      line-height: 15px;
-      margin-bottom: 10px;
-    }
-  }
-  .dtk-val {
-    margin-left: 10px;
-    width: 223px;
-    font-size: 16px;
-  }
-
-  .el-radio {
-    margin-right: 10px;
-  }
-
-  .paperRadio {
-    width: 56px;
-    height: 38px;
-    padding: 4px;
-    border: 1px solid #fff;
-    border-radius: 4px;
-    &.is-checked {
-      border: 1px solid #2e64fa;
-    }
-    .el-radio__label {
-      padding-top: 20px;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  .dtk-inline-div {
-    display: flex;
-    justify-content: space-around;
-  }
-  .lyItemTit {
-    display: inline-block;
-    line-height: 20px;
-  }
-
-  .lyItemIcon {
-    // display: inline-block;
-    padding-left: 25px;
-    width: 37px;
-    height: 20px;
-
-    img {
-      display: block;
-      width: 28px;
-    }
-  }
-
-  .table_question {
-    width: calc(100% - 40px);
-    margin: auto;
-    border: 1px solid #e9e9e9;
-    border-bottom: 0px solid #e9e9e9;
-
-    tr {
-      background-color: #fff;
-      height: 42px;
-
-      &:hover {
-        background-color: #f6faff;
-      }
-
-      td {
-        padding: 0px 8px;
-        color: #666666;
-        text-align: center;
-        border-bottom: #ebeef5 1px solid;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: normal;
-        word-break: break-all;
-        line-height: 23px;
-        padding-right: 10px;
-      }
-    }
-  }
-
-  .el-form-item {
-    margin-bottom: 4px;
-  }
-  .score {
-    padding-left: 6px;
-  }
-  .chooseBox {
-  }
-  .actionIcon {
-    margin-right: 6px;
-    color: #666666;
-    cursor: pointer;
-  }
-  .directionBox {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .directionItem {
-    margin-right: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &.row {
-      flex-direction: row;
-      align-items: center;
-      padding: 4px 5px;
-      width: 68px;
-      height: 16px;
-      background: #f5f7fa;
-    }
-    &.column {
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px;
-      width: 31px;
-      height: 38px;
-      background: #f5f7fa;
-    }
-    .d_a {
-      width: 31px;
-      height: 16px;
-      text-align: center;
-      line-height: 16px;
-      font-size: 12px;
-      border: 1px solid #909399;
-      background: #fff;
-    }
-  }
 }
 
 

+ 121 - 4
src/views/manager/index.vue

@@ -1,13 +1,130 @@
 <template>
-  <div>
-    运维
+  <div class="page_item">
+    <div class="page_search">
+      <div class="search_content">
+        <div class="content_left">
+          <el-input placeholder="请输入姓名或账号"  v-model="keyWord"  class="input_width">
+            <el-button @click="GoSearch()"  slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </div>
+        <div class="content_right">
+          <el-button   >刷新</el-button>
+          <el-button type="primary" @click="AddMultiExam" >
+                新增用户
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="page_jg_20"></div>
+    <div class="page_table">
+      <el-table :data="tableData" stripe  
+          :key="tableKey"
+          v-loading="tableLoading"
+          element-loading-text="拼命加载中……"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="#ffffff"
+           row-key="studentId">
+           
+            <el-table-column type="index" label="序号" :index="GetIndexNumber"   align="center" width="50"  fixed="left"></el-table-column>
+            
+            <el-table-column prop="account" label="账号" align="center"  show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column prop="userName" label="姓名" align="center"  show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column prop="stateName" label="状态" align="center"  show-overflow-tooltip>
+              <template #default="scope">
+                <div class="table_row_status">
+                    
+                    <!-- 需汇总 -->
+                    <div class="need_summary_icon" v-if="scope.row.state==1"></div>
+                    <!-- 汇总中 改成成绩中 -->
+                    <div class="score_look_icon" v-else-if="scope.row.state==4"></div>
+                    <!-- 已发布 -->
+                    <div class="yes_release_icon" v-else-if="scope.row.state==2"></div>
+                    <!-- 已关闭 -->
+                    <div class="ready_close_icon" v-else-if="scope.row.state==3"></div>
+                    <!-- 未发布 -->
+                    <div class="no_release_icon" v-else></div>
+                    {{ scope.row.stateName }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="loginTime" label="最后登录时间" align="center"  show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="120">
+                <template #default="scope">
+                  <div class="table_row_option">
+                  
+                      <div  class="button_editor"  @click="EditorStudent(scope.row)">编辑</div>
+                    
+                      <div  class="button_delete"  @click="DeleteStudent(scope.row)">删除</div>
+                  </div>
+                </template>
+            </el-table-column>
+          </el-table>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref ,onMounted, onBeforeUnmount} from 'vue'
+const tableData = ref([]);//表格数据
+const tableLoading = ref(false);//表格加载loading
+const tableKey = ref(0);//用于强制刷新table
+const keyWord = ref('');//搜索关键词
 
+const GetTableData=async()=>{
+  try{
+      // tableLoading.value=true;
+      // const res=await fetch('/api/manager/getStudents');
+      // if(res.code===200)
+      // {
+      //   tableData.value=res.data || [];
+      // }
+      tableData.value=[
+        {
+          account: '182900',
+          userName: '杨晓正',
+          phone: '13552478041',
+          state: '0',
+          stateName: '正常',
+          loginTime: '2024-10-15',
+        },
+        {
+          account: '182900',
+          userName: '杨晓正',
+          phone: '13552478041',
+          state: '1',
+          stateName: '封禁',
+          loginTime: '2024-10-15',
+        },
+        {
+          account: '182900',
+          userName: '杨晓正',
+          phone: '13552478041',
+          state: '1',
+          stateName: '封禁',
+          loginTime: '2024-10-15',
+        }
+      ];
+  }catch(error)
+  {
+    console.error('获取数据失败:', error)
+  }finally
+  {
+    tableLoading.value = false
+  }
 }
+// 组件挂载时自动加载数据
+onMounted(() => {
+  GetTableData()//加载表格数据
+})
+
+// 表格相关方法
+function GetIndexNumber(index) {
+  return index + 1
+}
+
 </script>
 
 <style>