zoukankan      html  css  js  c++  java
  • elementui el-table根据分页显示表格序号

    <template>
      <div>
        <el-table
          ref="table"
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          :header-cell-style="{'background':'#F5F4F7'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            :index="indexMethod"
            align="center"
          />
          <el-table-column
            prop="stroperationtype"
            label="数据操作类别"
            width="150"
          />
          <el-table-column
            prop="stroperationname"
            label="操作名称"
            min-width="120"
          />
          <el-table-column
            prop="strrownumber"
            label="操作数据条数"
            min-width="120"
          />
          <el-table-column
            prop="strrownumber"
            label="已导入条数"
            min-width="120"
          />
          <el-table-column
            prop="strtime"
            label="操作时间"
            min-width="120"
          />
          <el-table-column
            prop="stryearperiod"
            label="年度期间"
            min-width="120"
          />
          <el-table-column
            label="操作"
            width="160"
            fixed="right"
            align="center"
          >
            <template v-slot="scope">
              <el-button
                type="text"
                @click="delRow(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="paging.total > 0"
          background
          :current-page.sync="paging.page"
          :page-sizes="[50, 100, 500, 1000]"
          :page-size.sync="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="queryListByPage"
          @current-change="queryListByPage"
        />
      </div>
    </template>

    <script>
    import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'
    import { queryList, delData } from '@/api/data-interface/extract-data'

    export default {
      name: 'TableArea',
      mixins: [calculateCommonTableHeight],
      props: {
        searchForm: {
          type: Object,
          default: () => {}
        }
      },
      data() {
        return {
          tableData: [],
          paging: {
            total: 0,
            page: 1,
            size: 50
          }
        }
      },
      created() {
        this.queryListByPage()
      },
      methods: {
        indexMethod(index) {
          index = (index + 1) + (this.paging.page - 1) * this.paging.size
          return index
        },
        queryListByPage() {
          this.$nextTick(() => {
            queryList(
              this.searchForm,
              this.paging.page,
              this.paging.size

            ).then(res => {
              if (res.code === 20000) {
                this.paging.total = res.data.total
                this.tableData = res.data.rows
              }
            })
          })
        },
        // 删除
        delRow(row) {
          console.log(row)
          this.$confirm('是否删除该信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delData(row.lnglogid).then(res => {
              if (res.code === 20000) {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'success'
                })
                this.queryListByPage()
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      }
    }
    </script>

    <style scoped>

    </style>
  • 相关阅读:
    Spring Bean(一)
    Spring IOC(一)
    三种常用的查找算法
    分布式架构的一致性
    Java内存区域笔记(一)
    分组交换和电路交换
    Python说文解字_Python之多任务_03
    Python说文解字_Python之多任务_02
    Python说文解字_Python之多任务_01
    Python说文解字_杂谈09
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/11029585.html
Copyright © 2011-2022 走看看