aivfo-oa-web/src/components/DeptUserTree/index.vue

<template>
  <div>
    <el-input v-model="userNames" size="mini" disabled></el-input>
    <el-tree
      ref="dut"
      :data="userList"
      @check="change"
      show-checkbox
      :props="{label:'name'}"
      node-key="id">
    </el-tree>
  </div>

</template>

<script>
export default {
  name: "index",
  props: {
    userList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      userNames: undefined
    }
  },
  methods: {
    change() {
      let checkedNodes = this.$refs.dut.getCheckedNodes(true, false);
      let val = checkedNodes.map(node => node.id);
      let labels = checkedNodes.map(node => node.name);
      this.userNames = labels.join()
      this.$emit('selected', val)
      this.$emit('selectNode', checkedNodes)
    }
  }
}
</script>

<style scoped>

</style>