el-table 列分页

这篇具有很好参考价值的文章主要介绍了el-table 列分页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-table 列分页,Element UI,vue.js,Element UI,el-table,分页文章来源地址https://www.toymoban.com/news/detail-744514.html

<template>
  <div>
    <el-table
      :data="tableData"
      :key="tampTime"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in showColData"
        :key="index"
        :label="item.colLabel">
        <template slot="header">
          <div class="custom-header-cell">
            <span class="label">{{item.colLabel}}</span>
            <template v-if="colPage.totalPage > 1">
              <div v-if="!index" :class="['prev-btn', {disabled: colPage.current === 1}]" @click="handlePrev">上一页</div>
              <div v-if="index === showColData.length - 1" :class="['next-btn', {disabled: colPage.current === colPage.totalPage}]" @click="handleNext">下一页</div>
            </template>
          </div>
        </template>
        <template slot-scope="scope">
          {{ scope.row.colData[item.index].colValue }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [],
      fullColData: [],
      showColData: [],
      colPage: {
        current: 1,
        size: 10,
        totalPage: 0
      },
      tampTime: ''
    }
  },
  created () {
    this.initTableData()
  },
  methods: {
    // 模拟一些数据
    initTableData () {
      const result = []
      for (let i = 0; i < 10; i++) {
        const obj = {
          name: '张三',
          age: 18,
          gender: '男',
          colData: []
        }
        for (let j = 0; j < 40; j++) {
          obj.colData.push({
            colLabel: `${j + 1}`,
            colValue: `${i + 1}_${j + 1}`
          })
        }
        result.push(obj)
      }
      this.tableData = result
      this.initColData()
    },
    // 初始化列
    initColData () {
      const { tableData, colPage } = this
      const { colData: fullColData } = tableData[0]
      // 添加索引,用于取数据
      fullColData.forEach((item, index) => {
        item.index = index
      })
      this.fullColData = fullColData
      let showColData = fullColData
      if (fullColData.length > colPage.size) {
        showColData = fullColData.slice(0, 10)
      }
      this.showColData = showColData

      this.colPage.totalPage = Math.ceil(fullColData.length / colPage.size)
    },
    // 上一页
    handlePrev () {
      let { current } = this.colPage
      if (current > 1) {
        current--
        this.colPage.current = current
        this.changeCellData()
      }
    },
    // 下一页
    handleNext () {
      let { current, totalPage } = this.colPage
      if (current < totalPage) {
        current++
        this.colPage.current = current
        this.changeCellData()
      }
      this.$forceUpdate()
    },
    // 根据页数改变列数据
    changeCellData () {
      const { colPage, fullColData } = this
      const startSlice = (colPage.current - 1) * colPage.size
      const endSlice = startSlice + colPage.size
      const showColData = fullColData.slice(startSlice, endSlice)
      this.showColData = showColData
      this.tampTime = new Date().valueOf()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  // 默认是 hidden 按钮超出会隐藏
  .el-table__header-wrapper,
  th.el-table__cell,
  .cell {
    overflow: visible;
  }
  .custom-header-cell {
    position: relative;
    .label {
      position: relative;
      z-index: 2;
      color: #000;
    }
    .prev-btn,
    .next-btn {
      width: 20px;
      padding: 6px 0;
      position: absolute;
      z-index: 9;
      top: -12px;
      background-color: #3f3fbb;
      color: #fff;
      text-align: center;
      font-weight: 400;
      line-height: 18px;
      transition: all .4s;
      &:hover {
        cursor: pointer;
        opacity: .8;
      }
      &.disabled {
        cursor: not-allowed;
        background-color: #a6a7e2;
      }
    }
    .prev-btn {
      left: -30px;
    }
    .next-btn {
      right: -10px;
    }
  }
}
</style>

到了这里,关于el-table 列分页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue Element-ui el-table组件 实现跨分页全选 可全选中当前页 也可选中全量数据】

    前端模拟数据示例,无需后台接口,复制粘贴即可看到效果。 element-ui table里的全选功能只会全选当前页的所有数据 当table有分页功能的时候实现跨页全选 ①为table添加select方法(当用户手动勾选数据行的 Checkbox 时触发的事件) 两个参数 selection,row 选中的数据 最后一个选中

    2024年02月02日
    浏览(53)
  • element-ui中的el-table实现分页多选功能

    selection-change事件:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空) 链接: https://blog.csdn.net/qq_36157085/article/details/122922678

    2024年02月17日
    浏览(48)
  • element-ui 中 el-table 分页多选(记住上一页勾选数据)及编辑回显 element-ui 中 el-table 分页多选(记住上一页勾选数据)及编辑回显

    element-ui 的官网是有属性的 row-key  属性传入唯一值 row-key  属性传入一个方法 核心: this.$refs.multipleTable.toggleRowSelection(val, true)

    2024年02月15日
    浏览(47)
  • element-ui el-table分页后设置连续的索引(如排行榜)

    目录  1、自定义 type=index 列的行号 2、自定义indexMethod方法 3、效果   1、自定义  type=index  列的行号 通过给 type=index 的列传入 index 属性,可以自定义索引。 该属性传入数字时,将作为索引的起始值。 也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回

    2024年02月03日
    浏览(42)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(66)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(50)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(65)
  • vue element-ui表格(el-table)数据导出execl文件

    功能实现:element UI 的el-table数据导出为execl文件 使用到插件:xlsx、file-saver exportExecl.js 代码如下: 页面代码如下:

    2024年02月14日
    浏览(57)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(56)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包