vue2，table虚拟滚动使用vxe-table

1、安装

npm install vxe-pc-ui@3.3.80 vxe-table@3.12.9

main.js引入

import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VxeUITable)
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
Vue.use(VxeUI)

3使用

<template>
  <div class="dade">
    <div @click="dade()">打印</div>
    <vxe-table size="mini" border show-footer show-overflow show-header-overflow show-footer-overflow
      height="600"
      @checkbox-change="handleCheckboxChange"
      @checkbox-all="dadess"
      :loading="loading"
      :column-config="{resizable: true}"
      :scroll-x="{enabled: true, gt: 0}"
      :scroll-y="{enabled: true, gt: 0}"
      :data="tableData"
      :footer-data="footerData">
      <vxe-column field="checkbox" type="checkbox" width="60" fixed="left"></vxe-column>
      <vxe-column field="col0" title="列0" width="100" fixed="left" sortable></vxe-column>
      <vxe-column field="status" title="状态" width="100">
        <template #default="{ row }">
          <div v-if="row.status === '2'" status="error">驳回</div>
          <div v-else-if="row.status === '1'" status="primary">待处理</div>
          <div v-else status="success">已完成</div>
        </template>
      </vxe-column>
      <vxe-column field="col3" title="列3"></vxe-column>
      <vxe-column field="col4" title="列4" width="140"></vxe-column>
      <vxe-column field="col5" title="列5" width="300"></vxe-column>
      <vxe-column field="col6" title="列6" width="160"></vxe-column>
      <vxe-column field="action" title="操作" width="120" fixed="right">
        <template #default>
          编辑
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData:[],
      footerData:[{ checkbox: '合计', col0: '222', col1: '333', col3: '444', col5: '888'}],
      loading: false
    }
  },
  methods: {
    dade(){
      console.log(this.tableData)
    },
    // 选中那一个
    handleCheckboxChange(query) {
      console.log(query.$rowIndex);
      console.log(query.checked);
    },
    // 全选
    dadess(checked){
      console.log(checked.checked);
    },
    // 模拟行数据
    loadData (rowSize) {
      for(let i=0;i<=10000;i++){
        let d = { checkbox: false , col0: 'dade', col1: '333', col3: '444', col3: '444', col5: '888', col6: '88899'}
        d.col0 = i
        this.tableData.push(d)
      }
    }
  },
  created () {
    this.loadData(200)
  }
}
</script>

<style>

<style>

效果

原文地址：https://blog.csdn.net/qq_34631220/article/details/145287983

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！