关于前端:vue-如何通过组织范围来选择组织

需要：抉择本组织只获取单选的住址数据；如果是抉择 本组织及子组织，就抉择该组织下所有节点数据蕴含父节点。

<template>  <div class="dialog-user-role">    <div class="row-box">      <div class="col-left">        <div class="item-con">          <span class="choice-organ">抉择组织</span>          <div class="organ-con">            <div class="tree-filter">              <fin-input                placeholder="输出关键字查问"                v-model="filterText"                prefix-icon="fin-icon-search"                clearable                style="width: 170px"              >              </fin-input>            </div>            <div class="choise-radio">              <span class="organ-fw">组织范畴：</span>              <fin-radio v-model="radio" label="0" @change="onParentNode">仅本组织</fin-radio>              <fin-radio v-model="radio" label="1" @change="onParentAndChildNode"                >本组织及子组织</fin-radio              >            </div>            <div class="organ-tree">              <div class="tree-list">                <fin-tree                  ref="organTree"                  :data="treeData"                  :props="treeProps"                  node-key="id"                  :expand-on-click-node="false"                  :default-expand-all="true"                  :filter-node-method="filterNode"                >                  <span slot-scope="{ node, data }">                    <fin-radio v-model="radioNode" :label="data.id" @change="change(data)">                      {{ node.label }}                    </fin-radio>                  </span>                </fin-tree>              </div>            </div>          </div>        </div>      </div>        </div></template><script>export default {  data() {    return {      params: {},      checkedList: [],      checkedRoleIds: [],      checkedOrganRoleList: [],      roleIds: [],      hideBtns: true,      showPage: true,      filterText: '',      tooltipEffect: 'light',      radio: '0',      radioNode: '',      scope: 'SELF',      formsRole: [        {          label: '角色名称',          prop: 'name',          style: 'width:100%',        },        {          label: '利用名称',          prop: 'appName',          style: 'width:100%',        },      ],      treeData: [],      treeProps: {        children: 'child',        label: 'name',      },    };  },  components: {    AppTable,    FormSearch,  },  methods: {    filterNode(value, data) {      if (!value) return true;      return data.name.indexOf(value) !== -1;    },    // 单选组织    change(data) {      this.checkedList.length = 0;      // this.scope = 'SELF';      // this.checkedList[0] = data;      console.log('单选组织---', data);      if (this.scope == 'CHILD') {        this.checkedList = data.map((item) => ({          organId: item.id,          organName: item.name,        }));        console.log('duo选组织---', this.checkedList);      } else {        this.checkedList[0] = data;      }    },    // 本组织    onParentNode() {      this.scope = 'SELF';    },    // 本组织及子组织    onParentAndChildNode() {      this.scope = 'CHILD';      // this.checkedList.map((item) => {      //   if (item.child && item.child.length > 0) {      //     this.checkedList = this.checkedList.concat(item.child);      //     console.log('this.checkedList---', this.checkedList);      //   } else {      //     item.child = [];      //   }      // });    },    goBack() {      this.$router.go(-1);    },    formatStatus(row, column, cellValue) {      var statusTxt = '';      statusTxt =        cellValue == 'CHILD' ? '本组织及子组织' : cellValue === 'SELF' ? '仅本组织' : '状态谬误';      return statusTxt;    },    handleParams(params) {      return {        ...params,        ...this.params,      };    },  },};</script>