表格嵌套表格 多选 分页

于 2022-10-25 09:48:59 发布
阅读量219 收藏
点赞数
分类专栏： vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48300785/article/details/127315149
版权

在这里插入图片描述

<el-col >
                <div style="border: 1px solid #c9c9c9;">
                  <el-table
                    border
                    height="475"
                    ref="recordTable"
                    :row-key="recordKeys"
                    :data="tableData"
                    stripe
                    :header-row-style="{ height: '66px' }"
                    :cell-style="{ padding: '7px 0' }"
                    tooltip-effect="dark"
                    style="width: 100%;cursor: pointer;"
                    highlight-current-row
                    @selection-change="recordSelectionChange"
                    @row-click="singleClickChange"
                    :header-cell-style="{ 'text-align': 'center' }"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                      :reserve-selection="true"
                      :selectable="checkSelect"
                      v-if="radio === '案卷' ? true : false"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recordYear"
                      label="年度"
                      width="120"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recordTimeLimit"
                      label="保管期限"
                      width="120"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recordOrderNum"
                      label="案卷号"
                      width="100"
                      align="center"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recordHeading"
                      label="案卷题名"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recordCount"
                      label="卷内文件数"
                      width="150"
                      align="center"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                  </el-table>
                </div>
                <div style="text-align: center;margin-top: 10px">
                  <el-pagination
                    @size-change="handleSizeChangeClick"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="border: 1px solid #c9c9c9;">
                  <el-table
                    border
                    :data="tableDataFile"
                    ref="multipleFileTable"
                    :row-key="rowFileKey"
                    height="475"
                    stripe
                    :header-row-style="{ height: '66px' }"
                    :cell-style="{ padding: '7px 0' }"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center' }"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                      :reserve-selection="true"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="fileOrderNum"
                      label="文件号"
                      width="120"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="fileHeading"
                      label="文件题名"
                      :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>

data

  ruleForm: {
        items: []
      },

      selectAllChildMap: new Map(),

      tableData: [
        {
          recordYear: "2011",

          recordTimeLimit: "永久",

          recordOrderNum: "1",

          recordHeading: "案卷号1",

          recordId: "1",

          subList: [
            {
              // customerOrderItemId: 10,

              fileId: "3",

              recordId: "1",

              fileNum: "CG2022083100",

              fileHeading: "文件题名1"
            },

            {
              // customerOrderItemId: 100,

              fileId: "4",

              recordId: "1",

              fileNum: "CG2022083200",

              fileHeading: "文件题名2"
            }
          ],

          childIdList: ["4"]
        },

        {
          recordYear: "2022",

          recordTimeLimit: "定期",

          recordOrderNum: "2",

          recordHeading: "案卷号2",

          recordId: "21",

          subList: [
            {
              // customerOrderItemId: 20,

              fileId: "5",

              recordId: "21",

              fileNum: "CG2022091900",

              fileHeading: "文件题名2"
            }
          ],

          childIdList: ["5"]
        },
        {
          recordYear: "2022",

          recordTimeLimit: "定期",

          recordOrderNum: "2",

          recordHeading: "案卷号2",

          recordId: "21",

          subList: [
            {
              // customerOrderItemId: 20,

              fileId: "5",

              recordId: "21",

              fileNum: "CG2022091900",

              fileHeading: "文件题名2"
            }
          ],

          childIdList: ["5"]
        },
        {
          recordYear: "2022",

          recordTimeLimit: "定期",

          recordOrderNum: "2",

          recordHeading: "案卷号2",

          recordId: "21",

          subList: [
            {
              // customerOrderItemId: 20,

              fileId: "5",

              recordId: "21",

              fileNum: "CG2022091900",

              fileHeading: "文件题名2"
            }
          ],

          childIdList: ["5"]
        }
      ],

      active: 1,

      disableStep: true,

      currentPage: 1,

      pageSize: 2,

      total: 0,

      multipleSelection: [], // 第二步表格多选

methods

 handleSelectionChange(val) {
      let fileArr = [];
      fileArr = val.map(item => {
        return {
          fileHeading: item.fileHeading,
          recordId: item.recordId,
          fileId: item.fileId,
          fileOrderNum: item.fileOrderNum
        };
      });
      let tableArr = [];
      fileArr.forEach(el => {
        tableArr = this.tableData.filter(e => e.recordId === el.recordId);
        this.tableNewArr.push(tableArr[0]);
      });
      this.tableNewArr = this.tableNewArr.map(k => {
        return {
          recordYear: k.recordYear,
          recordTimeLimit: k.recordTimeLimit,
          recordOrderNum: k.recordOrderNum,
          recordHeading: k.recordHeading,
          recordCount: k.recordCount,
          recordId: k.recordId,
          currentNum: 0,
          sonData: []
        };
      });
      this.tableNewArr.forEach(k => {
        fileArr.forEach(i => {
          if (k.recordId === i.recordId) {
            k.sonData.push(i);
            k.currentNum = k.sonData.length;
          }
        });
      });
      for (let i = 0; i < this.tableNewArr.length; i++) {
        for (let j = i + 1; j < this.tableNewArr.length; j++) {
          if (this.tableNewArr[i].recordId == this.tableNewArr[j].recordId) {
            this.tableNewArr.splice(j, 1);
            j--;
          }
        }
      }
      this.tableNewArr = this.tableNewArr.filter(item => {
        return item.currentNum > 0;
      });
      this.multipleSelection = val;
    },
我的代码永没有bug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2+element嵌套表格+多选（连续选择待改进）+表格样式修改
weixin_58412143的博客
07-20 2192
代码】vue——基于element嵌套表格+多选。
table嵌套table的样式
最新发布
wang13679201813的博客
01-09 883
table嵌套注意事项。
element-ui实现table表格的嵌套（table表格嵌套）功能实现
热门推荐
yehaocheng520的博客
05-19 3万+
最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是table表格组件。 表格组件中常见的就是：标题和内容一一对应： 像效果图中的效果，只用基础的表格布局是不行的，因此我想到了table表格中的展开功能： 然后通过：默认展开所有行 然后在里面的表格table中默认隐藏表头： 其他的则需要通过样式进行实现了 element-ui中table表格的嵌套（代码部分） <el-table v-bind:data="tableData" :default-expand-al
table中嵌套多层table
赵树祥的博客
05-15 1万+
因工作业务需求，需要展示一个多层嵌套的数据结构，现整理如下，分享给需要的朋友，应用框架vue2。 初始的数据结构如下： new Vue({ el:"#table1", data:{ table1:[{ order: "ex-20171006", table2: [{ kind: '...
Egrid基于ElementUITable组件封装的高阶表格组件
08-07
Egrid作为高阶组件，增加了如自定义列模板、动态加载、行编辑、单元格编辑、拖拽列宽、多选、树形结构展示、嵌套表格等功能。这些高级特性使得Egrid在处理复杂数据和交互时更为灵活，大大提升了用户体验。 3. **...
在vue中实现二级下拉表格的table组件
08-10
在`NestedTable`组件的模板中，我们可以使用`v-for`指令遍历主数据，每个主表格行内可以嵌套一个子表格，通过`v-if`控制其显示隐藏： ```html (item)"> <td>{{ item.name }} <!-- 其他主表格列 --> ...
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
11-29
`options` 参数允许自定义表格的外观和行为，如斑马纹、加载动画、当前行高亮、多选功能、过滤功能以及操作列。 6. **Pagination 组件**： 分页组件 `el-pagination` 提供了诸如页码切换、每页数量选择等功能。在...
ios-一个三级列表选择多选.zip
07-11
每个表视图的数据源（dataSource）和代理（delegate）都需要正确设置，以处理表格的加载、行的渲染和用户的交互。例如，当用户点击一行时，程序需要更新对应的选中状态，并可能递归地展示下一级的列表。 多选功能则...
flex datagrid 嵌套checkbox实现全选
07-20
在Flex开发中，数据网格（DataGrid）是用于展示数据集合的强大组件，它允许用户以表格形式查看和操作数据。本示例关注的是在DataGrid中嵌套复选框（Checkbox），并实现全选功能。这在需要用户批量选择或操作数据的...
table2excel
08-16
页面table2excel，个人觉得兼容性和使用简易性为最佳插件，不乱码、css样式导出、下载名称自定义等
vue+element-ui实现表格里嵌套表格
鲁小班的博客
08-09 2万+
效果图：点击某行数据展开另一个嵌套在里面的table 核心代码： 从后台请求的数据格式： 代码实现： <template> <div> <div class="assetnum"> <div class="assetbox br pr30"> <div class="ass...
vue+elementUI实现表格嵌套
wangzhe123_的博客
09-05 8156
vue+elementUI实现表格嵌套功能
table表格多层嵌套table采坑！（重复描边兼容问题）
夕空
06-14 1万+
你肯定会说table还要解决兼容问题，你搞笑啊~~ 是的，一开始我也会这样说，但那是在只有一个table状况下，咋折腾都没问题，直到有一天。。。 先说说为什么要嵌套table，常规情况下我们用一个table就能解决问题，拆分及合并单元格可以用到rowspan和colspan，但是搞起来真的好麻烦啊！！！复杂的表格拆结构真的吐血。比如： 为了制作一个这种表格不得已大表格套小表格（或许有更方便...
table嵌套table
奋斗不息
08-12 5344
以下由驾驶员填写 住址 住址2 联系电话 ...
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1310
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
Ext3.4-EXT之嵌套表格的实现
weixin_34391854的博客
03-25 385
其中使用到的"RowExpander.js"为extjs官方示例中自带的。 实现这个嵌套表格要注意两点技巧： 1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。    var testData=[    ["lugreen","男",26,[["数学",100],["语文",150]]]    ,["lisi"
HTML2Excel 将table2excel 将table转换为Excel 支持合并单元格，边框 -- HTML2OFFICE教程1
陕西小伙伴网络科技有限公司-技术博客
05-25 3736
/** * html的 table转换为excel * @param html html内容 * @return excel二进制 */ public static byte[] table2Excel(String html) { return TableToXls.process(html); }
elementui 表格多选分页回显
06-09
对于 ElementUI 表格的多选分页回显，可以通过以下步骤实现： 1. 在父组件中定义一个数组 selectedRows，用于存储所有选中的行数据。 2. 在表格组件中添加一个 @selection-change 事件监听器，每当选中行数据发生变化时，将最新的选中行数据更新到 selectedRows 数组中。 3. 在表格组件中添加一个 :row-key 属性，用于指定表格行数据的唯一标识符。 4. 在表格组件中添加一个 :highlight-current-row="true" 属性，用于高亮当前行。 5. 在表格组件中添加一个 :default-selection 属性，用于设置表格初始化时默认选中的行数据。 6. 在分页组件中添加一个 @size-change 事件监听器，每当分页大小发生变化时，将当前页选中的行数据更新到 selectedRows 数组中。 7. 在分页组件中添加一个 :current-change 属性，用于设置当前页数发生变化时的回调函数。 8. 在回调函数中，根据当前页数和每页显示的行数，计算出当前页的行数据在 selectedRows 数组中的下标范围，并将对应的行数据设置为表格的默认选中行数据。 9. 在表格组件中添加一个 :selection 属性，用于设置表格的选中行数据，这里可以直接将 selectedRows 数组传递给该属性即可。 具体代码实现可以参考以下示例： ```html <template> <div> <el-table :data="tableData" :row-key="row => row.id" :highlight-current-row="true" :default-selection="defaultSelection" :selection="selectedRows" @selection-change="handleSelectionChange" > <el-table-column type="selection"></el-table-column> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-pagination :total="total" :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange" :current-change="handleCurrentChange" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], selectedRows: [], defaultSelection: [], total: 0, pageSize: 10, currentPage: 1 }; }, mounted() { // 初始化表格数据 this.getTableData(); }, methods: { getTableData() { // 获取表格数据 // ... }, handleSelectionChange(selectedRows) { // 更新选中行数据 this.selectedRows = selectedRows; }, handleSizeChange(pageSize) { // 分页大小发生变化时更新选中行数据 this.updateSelectedRows(); }, handleCurrentChange(currentPage) { // 当前页数发生变化时更新选中行数据 this.currentPage = currentPage; this.updateSelectedRows(); }, updateSelectedRows() { // 计算当前页的选中行数据在 selectedRows 数组中的下标范围 const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; // 将对应的行数据设置为表格的默认选中行数据 this.defaultSelection = this.selectedRows.slice(start, end); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值