element ui tree选择父节点

曾经终败给现在 2023-01-05 12:44 212阅读 0赞

<template>
      <div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-checkbox v-model="node.isChecked" @change="(e) => updateChange(e, node, data)"></el-checkbox>
            <span>{
       { node.label }}</span>
          </span>
        </el-tree>
      </div>
    </template>
    
    <script>
    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: [{
                  label: '三级 3-1-1'
                }]
              }, {
                label: '二级 3-2',
                children: [{
                  label: '三级 3-2-1'
                }]
              }]
            }]
          };
        },
        methods: {
          updateChange(e, node, data) {
            console.log(e, node, data)
            node.childNodes.map(res => {
              this.$set(res, 'isChecked', e)
            })
          }
        }
      };
    </script>
    <style lang="scss" scoped>
    </style>