learning-system-portal/src/views/grateful/TeacherOpinion.vue

<template>
  <div>
    <!-- 教师赋能 -->
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="modules-list" style="margin-top: 0;">
            <div class="bgc">
              <div class="title">
                <div>师资大全</div>
                <div style="position: relative;">
                  <el-input class="portal-input" placeholder="请输入课程名称或教师姓名工号"
                    style="border-radius: 20px !important;width: 300px; " @keyup.enter.native="searchJump()" clearable
                    maxlength="50" v-model="keyword">
                  </el-input>
                  <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
                </div>
              </div>

            </div>
            <div class="content">
              <el-table :data="pageData" stripe border>
                <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                <el-table-column label="课程名称" prop="courseUser" align="center"></el-table-column>
                <el-table-column label="课程价值" prop="auditTime" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="教师名称" prop="auditRemark" align="center" width="200px"
                  show-overflow-tooltip></el-table-column>
                <el-table-column label="教师工号" prop="auditRemark" align="center" width="200px"
                  show-overflow-tooltip></el-table-column>
              </el-table>
              <div v-if="pageData.length > 0" style="text-align: center;margin-top: 50px;">
                <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
                  @change-size="changePageSize" @change-page="loadData"></pagination>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import timeShow from "@/components/Portal/datetimeShow.vue";
export default {
  data: () => {
    return {
      keyword: '',
      pageData: [
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
        {
          courseUser: '2016-05-02',
          auditTime: '王小虎',
          auditRemark: '上海市普陀区金沙江路 1518 弄'
        },
      ],
      courseList: {
        list: [],
        count: 0,
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  components: { timeShow },
  methods: {
    searchJump() {

    },
    changePageSize(pageSize) {
      this.courseList.pageSize = pageSize
    },
    loadData(pageIndex) {
      this.pageIndex = pageIndex
    },
    noticeDetail(item) { },
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    changePageSize(pageSize) {
      this.courseList.pageSize = pageSize;
    },
    loadData(pindex) {
      console.log(pindex);
    },
  },
};
</script>
<style scoped lang='scss'>
.modules-list {
  min-height: 555px;
  background: #ffffff;
  border-radius: 8px;

  .bgc {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    height: 100px;
    background: linear-gradient(180deg,
        rgba(56, 125, 247, 0.2) 0%,
        rgba(166, 168, 255, 0) 100%);

    .title {
      padding: 20px 20px 0 20px;
      display: flex;
      justify-content: space-between;
    }
  }

  .content{
    padding: 0 40px 40px;
  }
  .sear-but {
    position: absolute;
    bottom: 10%;
    right: 5px;
  }
}
</style>