bab-icon/resources/js/components/Tree.vue

<template>
    <div class="custom-tree-container">
        <div class="block">

            <el-tree
              :data="data"
              show-checkbox
              default-expand-all
              node-key="id"
               @check-change="getCheckedKeys"
              ref="tree"
              highlight-current
              :default-checked-keys="select_keys"
              :props="defaultProps">
            </el-tree>


        </div>
    </div>
</template>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
</style>

<script>
  export default {
    methods: {
      getCheckedKeys() {
        var keys=this.$refs.tree.getCheckedKeys();
        console.log('子组件获取到数据------');
        console.log(keys);
         console.log('开始传递------');
        this.$emit('set-keys',keys);
      },


    },
    props: ['list','select_ids'],
    data() {
    console.log(this._props.list);
     console.log(this._props.select_ids);
      return {
       data: this._props.list ? this._props.list : [],
       select_keys: this._props.select_ids ? this._props.select_ids : [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>