post-ui/src/views/notice/noticeList.vue

<template>
  <div class="app">
    <!-- 头部 -->
    <div class="search">
      <div class="search-head">
        <div>
          <i id="search-text" class="el-icon-search"> 筛选搜索</i>
        </div>
        <div class="search-btn">
          <el-button plain>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </div>
      </div>
      <!-- 筛选公告标题 -->
      <div class="notice-search">
        <div class="notice-title">公告标题：</div>
        <div>
          <el-input
            class="search-input"
            v-model="input"
            placeholder="筛选公告标题"
          ></el-input>
        </div>
        <!-- 发布时间 -->
        <div class="publsh-date">发布时间：</div>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 公告列表 -->
    <div class="notice-list">
      <i class="el-icon-tickets"> 公告列表</i>
      <el-button id="addBtn" size="small">添加</el-button>
    </div>
    <!-- 数据栏 -->
    <div class="data-list">
      <el-table :data="tableData" border style="width: 100%" class="data-table">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="title" label="公告标题"> </el-table-column>
        <el-table-column prop="publishTime" label="发布时间"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text">查看详情</el-button>
            <el-button
              id="deleteBtn"
              size="mini"
              type="text"
              @click="deleteBtn(scope.$index)"
              >删除</el-button
            >
          </template>
          <!-- <el-button size="mini" type="text" icon="el-icon-delete"
            >删除</el-button
          > -->
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageMenu">
      <div id="dataNum">共0条</div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.search {
  width: 1250px;
  height: 150px;
  /* background: #e6e6e6; */
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-top: 30px;
}
#search-text {
  margin-top: 20px;
  margin-left: 20px;
  font-family: PingFang SC;
  font-size: 15px;
}
.search-head {
  display: flex;
  justify-content: space-between;
}
.search-btn {
  margin-top: 20px;
  margin-right: 20px;
}
.notice-search {
  display: flex;
  margin-left: 58px;
}
.notice-title {
  font-size: 13px;
  font-family: PingFang SC;
  color: #333333;
  margin-top: 8px;
  margin-right: 5px;
}
.search-input {
  width: 200px;
}
.publsh-date {
  font-size: 13px;
  font-family: PingFang SC;
  color: #333333;
  margin-left: 50px;
  margin-top: 8px;
}
.notice-list {
  width: 1250px;
  height: 50px;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-top: 30px;
  line-height: 17px;
  display: flex;
  justify-content: space-between;
}
.el-icon-tickets {
  margin-top: 17px;
  margin-left: 20px;
  font-family: PingFang SC;
  font-size: 15px;
}
#addBtn {
  width: 60px;
  height: 30px;
  margin-top: 10px;
  margin-right: 32px;
}
.data-list {
  width: 1250px;
  margin: 0 auto;
  margin-top: 30px;
}
.data-table {
  margin: 0 auto;
}
.pageMenu {
  width: 1283px;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
#dataNum {
  font-size: 13px;
  font-family: PingFang SC;
  margin-top: 7px;
  margin-right: 5px;
}
#deleteBtn {
  margin-left: 10px;
}
</style>
  

<script>
export default {
  data() {
    return {
      input: "",
      value1: "",
      tableData: [],
      mockNoticeList: [],
      total: 0,
      pageSize: 5,
      totalNum:"",
    };
  },
  mounted() {
    //获取总条目的id
    this.totalNum = document.querySelector('#dataNum');
    this.getMockNoticeList();
    this.getTableList();
    
    
  },

  methods: {
    getMockNoticeList() {
      var Mock = require("mockjs");
      var data = Mock.mock({
        "list|1-20": [
          {
            "id|+1": 1,
            title: "@cword(3, 5)",
            publishTime: "@datetime()",
            // 'operation|1-10': "★",
          },
        ],
      });
      this.mockNoticeList = data;
    },
    //获取数据按钮
    getTableList() {
      this.tableData = this.mockNoticeList.list;
      // console.log(this.tableData)

      //获取数据总数
      this.totalNum.innerHTML = `共：${this.tableData.length}条`;
      this.total = this.tableData.length;
      // console.log(this.total)
    },
    // 删除按钮
    deleteBtn(row) {
      this.tableData.splice(this.tableData[row],1)
      // console.log(this.tableData[row].id)
    },
  },
};
</script>