• table表格+ 分页 封装


    参数说明:

    pageSize:每页显示多少条
    pageCount:总共多少页
    pageIndex:当前是第几页(这里是从0开发)
    <template>
      <div>
        <el-table :data="traceTableList" class="border-all table-components-content" border style=" 100%;height:100%;">
          <el-table-column v-for="(headEle, index) in headerTraceTableList" :key="index" :prop="headEle.prop" :label="headEle.label" :width="headEle.width" :min-width="headEle.minWidth">
            <template slot-scope="scope">
              <!-- :class="{'text-warn': scope.row[headEle.prop]<0 }" -->
              <span :class="{'text-danger': (headEle.isWarning && scope.row[headEle.prop]) < 0}">{{ scope.row[headEle.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="showPage" class="page-container margin-t-10">
          <el-button type="primary" size="mini" icon="el-icon-arrow-left" :disabled="pageIndex===0" @click="handleLeftPage" />
          <span class="text-color-3">{{ pageIndex + 1 }}</span>
          <el-button type="primary" size="mini" icon="el-icon-arrow-right" :disabled="pageIndex < pageInfo.pageCount" @click="handleRightPage" />
        </div>
      </div>
    </template>
    <script>
      export default {
        name: 'TraceTable',
        props: {
          headerTraceTableList: {
            type: Array,
            default: function () {
              return []
            }
          },
          traceTableList: {
            type: Array,
            default: function () {
              return []
            }
          },
          showPage: {
            type: Boolean,
            default: false
          },
          pageInfo: {
            type: Object,
            default: function () {
              return {
                pageCount: 0,
                pageSize: 20
              }
            }
          }
        },
        data () {
          return {
            pageIndex: 0
          }
        },
        methods: {
          handleLeftPage () {
            this.pageIndex--
            this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize })
          },
          // 右分页
          handleRightPage () {
            this.pageIndex++
            this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize })
          }
        }
      }
    </script>
    <style scoped>
      .page-container > span {
        width: 35px;
        height: 28px;
        display: inline-block;
        text-align: center;
      }
    </style>
    View Code
  • 相关阅读:
    python基础
    python基础
    python基础
    在hive下使用dual伪表
    mariadb 压缩包gz安装方式
    linux下 mysql5.7.20安装(精华)
    在开启kerberos 后,hbase存在数据命名空间的问题(解决方案)
    LINUX下解决TIME_WAIT等网络问题
    常用Oracle进程资源查询语句(运维必看)
    linux 下oracle 11g静默安装(完整版)
  • 原文地址:https://www.cnblogs.com/phermis/p/11864313.html
Copyright © 2020-2023  润新知