vElTableAdaptive

ElTable高度自适应指令(仅支持在vue3项目中使用)

引入版本

0.80.0

Demo

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { vElTableAdaptive } from '@wyfex/iutils'

  const tableData = [
    { date: dayjs().format('YYYY-MM-DD'), name: 'Symbol(王独秀)' }
  ]

  const bottomOffset = 80
</script>

<template>
  <el-table
    :data="tableData"
    v-el-table-adaptive="bottomOffset"
  >
    <el-table-column
      prop="date"
      label="日期"
    />
    <el-table-column
      prop="name"
      label="姓名"
    />
  </el-table>
  <el-pagination
    class="page"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="1"
    :page-sizes="[10, 20, 30, 40]"
  />
</template>

<style scoped lang="scss">
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
</style>