post-ui/src/views/message/messageList.vue

<template>
  <div class="right" :style="{ height: height, width: width }">
    <div class="up">
      <div class="left-up">
        <div class="up-title">🔍筛选搜索</div>
        <div class="up-input-title">
          消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
        </div>
        <div class="up-input-title-right">
          <span class="demonstration">发布时间:</span>
          <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </div>
      </div>
      <div class="right-up">
        <div class="anniu">
          <el-button plain>重置</el-button>
          <el-button type="primary" plain>查询列表</el-button>
        </div>
      </div>
    </div>
      <div class="down">
        <div class="down-add">
          <el-row :gutter="24">
          <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
          <el-col :span="2"> <el-button>添加</el-button> </el-col>
          </el-row>
        </div>
        
        <div class="down-table">
          <el-table :data="tableData" border style="width: 100%" class="messagetable">
            <el-table-column
              prop="id"
              label="ID"
              >
            </el-table-column>
            <el-table-column
              prop="messageTitle"
              label="消息标题"
              >
            </el-table-column>
            <el-table-column
              prop="messageTitle"
              label="消息标题"
              >
            </el-table-column>
            <el-table-column
              prop="phoneNumber"
              label="手机号"
              >
            </el-table-column>
            <el-table-column
              prop="publishTime"
              label="发布时间"
              >
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
        <span class="bottom-number">共{{ 0 }}条 </span>
      </div>
    </div>
</template>

<script>
export default {
  
  props: {
    
  },
  data() {
    return {
      tableData: [],
      input:"",
      value2:"",
      mock:"",
      mockMessageList:[],
    }
  },
  //产生mock数据
  
  mounted() {
    this.getMockMessageList();
    this.getTableList();
  },
  beforeDestroy() {
    
  },
  methods: {
    getMockMessageList() {
      var Mock = require('mockjs')
      var data = Mock.mock({
          'list|1-10': [{
            'id|+1': 1,
            'messageTitle': '@EMAIL',
            'phoneNumber':'15888888888',
            'publishTime':'2022-05-03',
            // 'regexp3': /\d{5,10}/
        }]
      })
      // console.log(data);
      this.mockMessageList = data ; 
      // console.log( this.mockMessageList.arr);
    },
    getTableList() {
      this.tableData = this.mockMessageList.list
    }
  }
}


</script>

<style scoped>
.up {
  width: 96%;
  height: 150px;
  margin-top: 20px;
  margin-left: 2%;
  border: 1px solid #ccc;
}

.up-title {
  width: 20%;
  margin-left: 20px;
  margin-top: 20px;
}

.up-input {
  width: 250px;
  margin-left: 15px;
}

.up-input-title {
  margin-top: 15px;
  margin-left: 40px;
  
  float: left;
}

.up-input-right {
  width: 500px;
}

.up-input-title-right {
  margin-left: 450px;
  margin-top: 15px;

}
.left-up{
  width: 80%;
  float: left;
}
.right-up{
  width:16%;
  margin-top: 2%;
  float: right;
  
}
.anniu{
  padding-right: 5%;
}
.down{
  margin-top: 40px;
}
.down-add{
  padding: 10px;
  margin: 0 27px;
  border:1px solid #ccc ; 
  border-radius: 2px
}
.down-title{
  padding-top: 10px;
  color: #303133;
}
.down-table{
  margin-top: 15px;
  text-align: center;
  margin: 35px 27px;
}

.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    word-break: break-word;
    /* background-color: #f8f8f9; */
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    text-align: center;
}
.bottom-number{
  padding-top: 5px;
  color: #303133;
  float: right;
}
.bottom-page{
  float:right;
}
/**
自适应
*/

.right {
  float: none;
  width: 100%;
  height: 100%;
  /* background-color: #9dc3e6; */
}
</style>