解决layui element树形表格全选失效,刷新保持原数据选中

2022-10-19前端开发
614

官方文档拿下来的代码,全选时子节点不能被选中,接下来就来解决。绑定上全选,和单选点击事件。定义变量checked,这个主要用来判断当前是该全选还是全不选的。selectList是用来做刷新后保持选中的。

上面绑定的方法如下,代码如下,解决了全选问题:
    // 全选操作
    selectAll() {
      this.checked = !this.checked;
      if (this.checked) {
       
      } else {
       
      }
 this.select(this.tableData, this.checked);
    },
    // 单选操作
    selectA(se) {
      if (se.length = this.tableData.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 全选
    select(val, boo) {
      val.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, boo);
        if (row.children != undefined) {
          this.select(row.children, boo);
        }
      });
    },

下面是需要数据保留勾选状态的实现,直接上完整代码:
 

<template>
  <div align="center">
    <el-button icon="el-icon-refresh" @click="resetQuery">刷新</el-button>
    <el-table
      ref="multipleTable"
      @select-all="selectAll"
      @select="selectA"
      :data="tableData"
      style="width: 800px; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="180" />
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    {{ selectList }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      selectList: [],
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    // 全选操作
    selectAll() {
      this.checked = !this.checked;
      let list = this.getNewTableDate(this.tableData);
      if (this.checked) {
        list.forEach((item) => {
          var boo = false;
          this.selectList.forEach((item2) => {
            if (item.id == item2.id) {
              boo = true;
            }
          });
          if (!boo) {
            this.selectList.push(item);
          }
        });
      } else {
        list.forEach((item) => {
          this.selectList.forEach((item2, index) => {
            if (item.id == item2.id) {
              this.selectList.splice(index, 1);
            }
          });
        });
      }
      this.select(this.tableData, this.checked);
    },
    // 单选操作
    selectA(se, row) {
      if ((se.length = this.tableData.length)) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      let selected = se.length && se.indexOf(row) !== -1;
      if (selected) {
        this.selectList.push(row);
      } else {
        this.selectList.forEach((re, index) => {
          if (re.id == row.id) {
            this.selectList.splice(index, 1);
          }
        });
      }
    },
    // 全选
    select(val, boo) {
      val.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, boo);
        if (row.children != undefined) {
          this.select(row.children, boo);
        }
      });
    },
    // 提取表格数据
    getNewTableDate(arr) {
      let array = [];
      arr.forEach((item) => {
        array.push(item);
        if (item.children != undefined) {
          item.children.forEach((item2) => {
            array.push(item2);
          });
        }
      });
      return array;
    },
    // 刷新
    resetQuery() {
      this.tableData = [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: 5,
          date: "2016-05-08",
          name: "张三",
          address: " 1516 弄",
        },
      ];
      // 勾选之前选中的数据,跟版网整理
      this.getSelectList();
    },
    getSelectList() {
      if (this.selectList.length != 0) {
        let arr = this.tableData;
        var array = [];
        let list = this.getNewTableDate(arr);
        list.forEach((ite) => {
          this.selectList.forEach((ite2) => {
            if (ite.id == ite2.id) {
              array.push(ite2);
            }
          });
        });
        if (array.length == list.length) {
          this.checkedKeys = true;
        } else {
          this.checkedKeys = false;
        }
        this.togselect(arr, true);
      }
    },
    togselect(arr, boo) {
      this.$nextTick(() => {
        arr.forEach((row) => {
          this.selectList.forEach((sa) => {
            if (row.id == sa.id) {
              this.$refs.multipleTable.toggleRowSelection(row, boo);
            }
          });
          if (row.children != undefined) {
            this.togselect(row.children, boo);
          }
        });
      });
    },
  },
};
</script>
The End
layui element 树形表格

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112

layui.open属性打开一个弹出层
核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类 类型:Number,默认:0 layer提供了5...
2025-02-25 前端开发
82