vue利用 el-select ，el-option ，el-tree，实现结构树选中，删除

实现原理 根据tree 选中的id集合，反选 el-select中的el-option，并隐藏el-option ,利用wacth监听实现数据反选到结构树。

          <el-col :span="24">
              <el-form-item label="群成员：" prop="groupMembers">
                 <el-select  :disabled="this.groupChatDialogTitle == '群详情' || this.groupChatDialogTitle == '修改群聊'" v-model="paramData.groupMembers" multiple  class="width100" placeholder="请选择群成员">
                 <!-- :label="'(' + item.name + ')' + item.nameCh" 这里是根据需求显示（） -->
                  <el-option class="opentionfalse" v-for="(item, index) in datalsituer" :key="index" :value="item.id" :label="'(' + item.name + ')' + item.nameCh"> </el-option>
                  <el-tree ref="treessu" class="tenant_tree" :data="resourceTreeList" show-checkbox :props="defaultProps" node-key="id" highlight-current @check-change="handleCheckChange"></el-tree>
                </el-select>
              </el-form-item>
            </el-col>

  data() {
    return {
      defaultProps: {
        children: 'children',
        label: function (data, node) {
                //根据需求显示label
          if (data.type == 'user') {
            return '(' + data.name + ')' + data.label
          } else {
            return data.label
          }
        }
      },
       paramData: {
        groupMembers: [], //群成员
      },
        tags: [],
        resourceTreeList: [],//tree树数据 选中全部人员信息和人员列表数据一致
        datalsituer: [] //人员列表 数据和结构树里的人员信息要保持一致
     }
  },
    methods: {
      handleCheckChange() {
      this.paramData.groupMembers = []
      this.tags = this.$refs.treessu.getCheckedNodes()
      //需求不要部门只要用户，因此这里做判断
      this.tags
        .filter(item => item.type == 'user')
        .map(item => {
          this.paramData.groupMembers.push(item.id)
        })
    },
    },
    //监听
   watch: {
    'paramData.groupMembers': {
      handler: function (val) {
          this.$refs.treessu.setCheckedKeys(this.paramData.groupMembers)
      },
      deep: true,
    }
  }