antdv和element表格,假分页+表格高度处理mixins

javascript 复制代码
// 表格假分页+表格高度mixins
export const tableHeightPagesMixins = {
  data() {
    return {
      dataSource: [], //假分页数据
      tableData: [],
      //分页数据
      currentPage: 1, //当前页
      pageSizes: [20, 50, 80, 100], //分页下拉列表
      pageSize: 20, //每页数量
      total: 0, //总数量
      height: 200, //表格需要-高度
      tableHeight: 0,
    }
  },
  mounted() {
    // 组件加载时设置表格大小
    this.updateTableScrollData()
    // 窗口大小改变时设置表格大小
    window.onresize = () => {
      this.updateTableScrollData()
    }
  },
  destroyed() {
    // 注销onresize事件
    window.onresize = null
  },
  methods: {
    updateTableScrollData() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.height
      })
    },
    handleSizeChange(val) {
      //每页数量选择
      this.pageSize = val
      this.setPseudoPagingData()
    },
    handleCurrentChange(val) {
      //当前页选择
      this.currentPage = val
      this.setPseudoPagingData()
    },
    // 假分页
    setPseudoPagingData() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.tableData //后端回来表格的数据
      //表格渲染的数据  indexResultsTable:[],
      this.dataSource = list.filter(
        (item, index) =>
          index < this.currentPage * this.pageSize &&
          index >= this.pageSize * (this.currentPage - 1)
      ) //根据页数显示相应的内容
      this.total = list.length
    },
  },
}

使用

javascript 复制代码
import { tableHeightPagesMixins } from '@/mixins/table-height-pages-mixins'
mixins: [tableHeightPagesMixins],

element例子

javascript 复制代码
 <el-table v-show="showFlag == 2" ref="pointMultipleTable" border class="table-box" :data="[damActiveObj]"
      :height="tableHeight" row-key="id" :tree-props="{ children: 'children' }" :expand-row-keys="expandRowKeys">
      <el-table-column v-for="column in columnAttrs" :key="column.prop" :label="column.label" :prop="column.prop"
        :align="column.align || 'right'" :width="column.width" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          <span v-if="column.prop === 'evaluateLevelNm'" :style="{
            color: colors[row['evaluateLevel']]
          }">
            {{ row[column.prop] }}
          </span>
          <span v-else>{{ row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
相关推荐
乌兰麦朵12 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风12 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾13 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿14 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸14 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic15 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮16 分钟前
vite打包的简单配置
前端
Codebee16 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝17 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
知了一笑20 分钟前
独立开发问题记录-margin塌陷
前端