使用umy-ui处理批量数据勾选加载等

本文链接：https://blog.csdn.net/lamuleimu/article/details/144111303

vue项目里引入和使用：

//1. main.js 里按需引入

import { UTableColumn, UTable } from 'umy-ui';

//2.引入样式

import 'umy-ui/lib/theme-chalk/index.css';// 引入样式

//3.全局挂载  

Vue.use(UTableColumn).use(UTable);

new Vue({
  render: h => h(App),
}).$mount('#app')

组件本体：

<template>
  <div v-loading="loading" class="tableBox">
    <div class="head-right">
     <el-button-group>
       <el-button @click="clearSelection">取消选择</el-button>
       <el-button @click="partRowSelections">大批量勾选</el-button>
       <el-button @click="toggleSelection">切换选中状态</el-button>
     </el-button-group>
    </div>
     <!--    注意绑定方法短横线的不能用改成驼峰否则不生效-->
    <u-table
      ref="plTable"
      v-bind="config"
      @selection-change="selectionChange"
      @handlePageSize="handlePageSize"
      @select="select"
    >
      <u-table-column v-for="typeItem in typeCol" :key="typeItem.type" :type="typeItem.type" :width="typeItem.width" :fixed="typeItem.fixed" />
    <!--      当内容过长被隐藏时显示 show-overflow-tooltip-->
      <u-table-column
        v-for="item in tableCol"
        :key="item.id"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :width="item.width"
        :show-overflow-tooltip="true"
      >
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:'PlsTable',
  data() {
    return {
      loading:false,
      tableData:[],
      height: document.body.clientHeight ,
      columns: [
        {type:'selection',width:100,fixed:'left'},
        {type:'index',label:'序号',width:100,fixed:'left'},
        {prop:'goodsname',label:'商品名称',width:200},
        {prop:'amount',label:'价格',width:200},
        {prop:'djrq',label:'单据日期',width:200},
        {prop:'num',label:'数量',width:200},
      ],
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeTable)
  },
  computed:{
    config(){
      console.log(this.height,'this.height')
      return {
        //虚拟表格必设
        useVirtual: true,//开启虚拟表格
        bigDataCheckbox: true,//虚拟表格复选框
        rowKey:'id',//如果使用partRowSelections改勾选状态一定要加上否则这个方法不生效
        height: 500 ,//表格高度 这个可以动态设置但是要处理好上级高度否则大量数据会复选框会有选不中的问题
        maxHeight: 1000,//表格最大高度 我用的时候没设置也没啥事但是官网推荐
        rowHeight: 20,//和样式设置保持一致
        //可选项
        border: true,//带边框
        stripe: true,//斑马纹
        highlightCurrentRow: true,
        size: 'medium',//表格尺寸大小
        headerDragStyle: true,//拖拽表头样式自设
        headerRowClassName: 'header-row',//设置表头行的样式
        showBodyOverflow:"ellipsis",//设置单元格内容过长时显示为省略号
        showHeaderOverflow:"ellipsis",//设置表头所有内容过长时显示为省略号
        excessRows: 3,//可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能
        //分页相关
        paginationShow: true,
        total:0,//总条数
        currentPage:1,//当前页码
        pageSize:5000,//每页显示条目个数
        pageSizes: [200, 500, 1000, 5000],//每页显示个数选择器的选项设置
        pagerCount:5,//页码按钮的数量超出折叠
      }
    },
    //类型表格列
    typeCol(){
      return this.columns.filter(item=>{
        return item.type
      })
    },
    //数据表格列
    tableCol(){
      return this.columns.filter(item=>{
        return item.prop
      })
    }
    },
  mounted () {
    window.addEventListener('resize', this.resizeTable)
    this.getTableList()
  },
  methods: {
    resizeTable() {
      this.height = (document.body.clientHeight - 260) + 'px'
    },
    //获取表格数据
    getTableList() {
      this.loading=true
     axios({
       url: 'http://127.0.0.1:3002/api/getList',
       method: 'post',
       data:{
         pageNo:this.config.currentPage,
         pageSize:this.config.pageSize,
       }
     }).then(res=>{
       this.loading=false
       // console.log('请求成功',res)
       const {pageNo,pageSize,list,total}=res.data
       this.config.total = total
       this.config.pageSize = pageSize
       this.config.currentPage = pageNo
       //这个数据可存一下便于后续筛选
       this.tableData = list
       // 大数据量不适用data直接绑定数据 使用此方法 每次数据变更都需要重新调方法加载数据
       this.$refs.plTable.reloadData(this.tableData)
     })
    },

    //复选框是否可选
    selectable (row, index) {
     console.log('selectable',row,index)
      // if (index === 1) {
      //   return false
      // } else {
      //   return true
      // }
      return true
    },

    //清除所有选中
    clearSelection () {
      this.$refs.plTable.clearSelection()
    },

    // 如果你要选择大量数据，请使用partRowSelections方法。
    partRowSelections () {
      // 获取前面的500条数据。实际场景自己去给你要选中的数据
      let data = this.tableData.slice(0,3000)
      let state=true
      // data是数据，state是选中还是取消选中
      this.$refs.plTable.partRowSelections(data, state)
    },
    // 适用于少量的数据切换选中,
    toggleSelection(){
      // for(let i=0;i<this.tableData.length;i++){
      //   this.$refs.plTable.toggleRowSelection([
      //     {
      //       row: item,
      //       selected: true
      //     }
      //   ])
      // }
        this.$refs.plTable.toggleRowSelection([
          {
            row: this.tableData[0],
            selected: true//true为选中 false为取消选中
          }
        ])
    },
    //选项发生变化触发 只能获取选中的行数组
    selectionChange(selection){
      console.log(selection,'selectionChange')
    },
    //手动勾选触发 row是改变状态的行对象 selection是选中的行数组
    select(selection, row){
      console.log(selection, row,'select')
    },
    //分页信息 页码 每页大小
    handlePageSize({page,size}){
      this.config.currentPage = page
      this.config.pageSize = size
      this.getTableList()
    }
  }
}
</script>
<style scoped>
.tableBox{
  height:100%;
}
</style>