zoukankan      html  css  js  c++  java
  • element el-table表格树状图全选/取消 子节点无法选中问题

    效果图(全选、取消):


    html

    <el-table ref="table" :data="tableData" row-key="id" border @select="select" @select-all="selectAll" :tree-props="{children: 'childList'}"></el-table>
    
    

    data

    tableData: [
            { name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄' },
            { id: 3, date: '2016-05-01', name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄',
              childList: [{ id: 31, date: '2016-05-01', name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄'},
                { id: 32,  date: '2016-05-01',  name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄' }]
            }
          ]
    

    js

      methods: {
        setChildren(children, type) {
          // 编辑多个子层级
          children.map((j) => {
            this.toggleSelection(j, type)
            if (j.childList) {
              this.setChildren(j.childList, type)
            }
          })
        },
        // 选中父节点时,子节点一起选中取消
        select(selection, row) {
          if (
            selection.some((el) => {
              return row.id === el.id
            })
          ) {
            if (row.childList) {
              // 解决子组件没有被勾选到
              this.setChildren(row.childList, true)
            }
          } else {
            if (row.childList) {
              this.setChildren(row.childList, false)
            }
          }
        },
        toggleSelection(row, select) {
          if (row) {
            this.$nextTick(() => {
              this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
            })
          }
        },
        // 选择全部
        selectAll(selection) {
          // tabledata第一层只要有在selection里面就是全选
          const isSelect = selection.some((el) => {
            const tableDataIds = this.tableData.map((j) => j.id)
            return tableDataIds.includes(el.id)
          })
          // tableDate第一层只要有不在selection里面就是全不选
          const isCancel = !this.tableData.every((el) => {
            const selectIds = selection.map((j) => j.id)
            return selectIds.includes(el.id)
          })
          console.log(isSelect, 'isSelect')
          if (isSelect) {
            selection.map((el) => {
              if (el.childList) {
                // 解决子组件没有被勾选到
                this.setChildren(el.childList, true)
              }
            })
          }
          if (isCancel) {
            this.tableData.map((el) => {
              if (el.childList) {
                // 解决子组件没有被勾选到
                this.setChildren(el.childList, false)
              }
            })
          }
          this.$emit('handleSelect', this.tableData)
        }
      }
    
    
  • 相关阅读:
    5个经典的javascript面试问题
    去年的一些面试题
    各种奇妙的hack
    jQuery工作原理解析以及源代码示例
    JavaScript Window
    原生JavaScript技巧大收集(1~10)
    蜘蛛爬虫类程序抓取有防盗链的网站处理 php和wget命令简单破解防盗链网站的功能
    Git SSH Key 生成步骤
    linux下ssh使用rsa认证教程
    linux FTP服务器 VSFTP配置手册
  • 原文地址:https://www.cnblogs.com/wwj007/p/14535932.html
Copyright © 2011-2022 走看看