element-ui 树形表格无法全选问题

当表格不是树形结构是,全选是没问题的,但是当有了children时,全选就出现问题了,无法选中子级,

我的业务逻辑是

1.表头全选状态时,所有子级要选中

2.选中父级时,所有子级要选中

3.父级旁边要有取消子级按钮,取消子级时,至选中本级

element-ui 树形表格无法全选问题_第1张图片

        
            
            
            
            
            
            
                
            
            
                
            
            
        

js部分是

    methods: {
        // 取消子级
        cancelLower(row){
            this.clearSelect(row.children)
        },
        // 更改批量选中
        toselect(row) {//每一行单个单个点击
            this.isRowClick = true
            console.log(row)
            if (row.checks) {
                this.initSelect(row.children)
            }else {
                this.clearSelect(row.children)
            }
            this.initDD()
            this.isRowClick = false
        },
        initDD() {
            this.isAllSelectClick = true
            this.$refs.multipleTable.clearSelection();
            this.togg(this.tableData)
            this.isAllSelectClick = false
        },
        togg(val) {
            if (!val) return
            val.forEach(item => {
                if (item.checks) this.$refs.multipleTable.toggleRowSelection(item);
                if (item.children && item.children.length > 0) this.togg(item.children)
            })
        },
        clearSelect(val) {
            if (!val) return
            val.forEach(item => {
                this.$set(item, 'checks', false)
                if (item.children && item.children.length > 0) this.clearSelect(item.children)
            })
        },
        initSelect(val) {
            if (!val) return
            val.forEach(item => {
                this.$set(item, 'checks', true)
                if (item.children && item.children.length > 0) this.initSelect(item.children)
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if (this.isAllSelectClick) return
            this.clearSelect(this.tableData)
            this.initSelect(val)
            this.initDD()
            if (!this.isRowClick && !this.tableData[0].checks) {
                this.clearBatch()
                this.clearSelect(this.tableData)
                return
            }
        },
        clearBatch() {
            this.$refs.multipleTable.clearSelection();
        },
    },

可参考原文 https://blog.csdn.net/jeff__liu/article/details/104924176

你可能感兴趣的:(vue.js,javascript,html)