zoukankan      html  css  js  c++  java
  • Element 懒加载表格el-table数据实现全选功能

    <el-table 
              v-loading="loading.list"
              ref="table"
              :data="tableData"
              style=" 100%"
              max-height="400"
              border
              lazy
              row-key="key"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :load="load"
              :header-cell-class-name="cellClass"
              @select="selectRow"
              @selection-change="selectionChange"
                        @select-all="selectAll">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column prop="key" label="编号"></el-table-column>
              <el-table-column prop="identityName" label="姓名"></el-table-column>
            </el-table>
    data() {
        return {
          form: {
            dimId: 1,
            name: '',
            key: '',
            tenantId: ''
          },
          treeData: [],
          tableData: [],
          loading: {
            tree: false
          },
          multipleSelection: [],
          tableAllData: [], // 存储所有的表格数据
          checkAll: false, // 判断当前是否全选
        } 
      },
    // 全选
    selectAll(selection) {
          this.checkAll = !this.checkAll;
          this.tableAllData.map(row => {
            this.$refs.table.toggleRowSelection(row, this.checkAll);
          })
    }, async load(row, treeNode, resolve) {
    try { let self = this; let params = { parentId: row.groupId, groupId: row.groupId } const data = await getOrganizeList({ ...self.form }, params) let arr = data.map(item => { return { ...item, hasChildren: item.childs && item.childs > 0, children: [] } }) this.tableAllData = this.tableAllData.concat(arr) // 保存表格数据 resolve(arr) return } catch (error) { console.log(error) } },
  • 相关阅读:
    将博客搬至CSDN
    05 Python字符串的通用操作
    02 Shell变量
    01 Shell脚本编程入门知识
    windows10安装Python环境
    03 Python数值类型及数字类型详解
    02 变量和语句
    01 交互解释器
    poi.jar处理excel表
    (41)java并发包中的线程池种类及特性介绍
  • 原文地址:https://www.cnblogs.com/fczbk/p/14062495.html
Copyright © 2011-2022 走看看