Web/admin.ui.plus-master/src/views/admin/statement/sendMessage/index.vue

<template>
    <div class="layout-pd" >
      <el-row>
        <!--操作-->
        <el-col :xs="24" >
          <el-card style="text-align: center;font-weight: 600;font-size: large;">
            信息发送列表
          </el-card>
        </el-col>
        <!--表格-->
        <el-col  :xs="24" >
          <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
            <el-table ref="multipleTableRef"
              v-loading="Data.loading"
              stripe :data="Data.tableModel"
              row-key="id"
              style="width: 100%" >
              <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
            </el-table>
            <div class="my-flex my-flex-end" style="margin-top: 20px">
              <el-pagination
                v-model:currentPage="Data.pageInput.currentPage"
                v-model:page-size="Data.pageInput.pageSize"
                :total="Data.total"
                :page-sizes="[5, 10, 20, 50, 100]"
                small
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  
  </template>
  
  <script setup lang="ts" name="partsManagement/oilGun">
  import {onMounted, reactive, watch} from "vue";

  
  /**页面对象 */
  const Data = reactive({
    /** 选择框列表 */
    statusList : [] as any,
    supplierList : [] as any,
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
    
    /**表格信息 */
    tableModel: [],
    /**动态表头 */
    dynamicColumns: [
      { prop: '', label: '发送ID' },
      { prop: '', label: '渠道' },
      { prop: '', label: '手机号' },
      { prop: '', label: '微信id' },
      { prop: '', label: '发送时间' },
      { prop: '', label: '发送内容' },
      { prop: '', label: '规则id' },
      { prop: '', label: '备注' },
    ],
    /**分页总数 */
    total: 0,
    /**分页标识 */
    pageInput:{
      currentPage: 1,
      pageSize: 10,
    },
    })



  /**
 * 页条变化
 * @param val
 */
const onSizeChange = (val: number) => {
  Data.pageInput.pageSize = val
//   init()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  Data.pageInput.currentPage = val
//   init()
}
  


  </script>
  
  <style scoped lang="scss">
  .my-el-link {
    font-size: 14px;
  }
  .el-form .el-col.mb20 {
    margin: 0 !important;
  }
  .el-input, .el-select {
    width: 240px;
  }
  </style>