element tree只选择父，不选择孙

旧城等待， 2023-01-05 14:22 184阅读 0赞

<template>
      <div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </el-tree>
      </div>
    </template>
    
    <script>
    import { elCheckbox } from 'element-ui'
    export default {
        data() {
          return {
            data: [{
              label: '一级 1',
              children: [{
                label: '二级 1-1',
                children: [{
                  label: '三级 1-1-1'
                }]
              }]
            }, {
              label: '一级 2',
              children: [{
                label: '二级 2-1',
                children: [{
                  label: '三级 2-1-1'
                }]
              }, {
                label: '二级 2-2',
                children: [{
                  label: '三级 2-2-1'
                }]
              }]
            }, {
              label: '一级 3',
              children: [{
                label: '二级 3-1',
                children: [{
                  isChecked: true,
                  label: '三级 3-1-1'
                }]
              }, {
                label: '二级 3-2',
                children: [{
                  label: '三级 3-2-1'
                }]
              }]
            }]
          };
        },
        methods: {
          renderContent(h, { node, data, store }) {
            return (
              <span>
                <input type="checkbox" checked={Boolean(data.isChecked)} on-change={(e) => this.updateChange(e, node, data)} />
                <span>{node.label}</span>
              </span>
              
            )
          },
          updateChange(e, node, data) {
            console.log(e.path[0].checked, node, data)
            this.$set(data, 'isChecked', e.path[0].checked)
            node.childNodes.map(res => {
              this.$set(res.data, 'isChecked', e.path[0].checked)
            })
          }
        }
      };
    </script>
    <style lang="scss" scoped>
    </style>

updateChange(e, node, data) {
            const isChecked = e.path[0].checked
            const arr = []
            this.$set(data, 'isChecked', isChecked)
            arr.push(data.label)
            node.childNodes.map(res => {
              this.$set(res.data, 'isChecked', isChecked)
              arr.push(res.data.label)
            })
            arr.map(item => {
              if (isChecked) {
                this.checkList.push(item)
              } else {
                const i = this.checkList.indexOf(item)
                 i > -1 && this.checkList.splice(i, 1)
              }
            })
            this.checkList = [... new Set(this.checkList)]
            console.log(this.checkList)
          }