rt-sim-training-client/src/views/trainRoom/e-members.vue

<template>
  <div class="member">
    <div class="member__head">
      <div class="member__head--title"> 成员列表</div>
      <div class="member__head--notes"> {{ members.length }}/{{ room.totalNum }}</div>
    </div>
    <div class="member__container">
      <el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
      <el-scrollbar class="member__container--list" wrap-class="scrollbar-wrapper" :style="{height: treeHeight+'px'}">
        <el-tree
          ref="tree"
          :data="filterMembers"
          :filter-node-method="handleFilterNode"
          :lazy="false"
          :props="defaultProps"
          @node-contextmenu="handleShowContextMenu"
        >
          <span slot-scope="{ node, data }">
            <span v-if="node.data.inRoom" style="color: green;">{{ data.nickName }}</span>
            <span v-else style="color: #ccc;">{{ data.nickName }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <content-menu ref="menu" :click-user-id="clickUserId" />
  </div>
</template>

<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import ContentMenu from './content-menu';

export default {
    components: {
        ContentMenu
    },
    props: {
        room: {
            type: Object,
            required: true
        },
        members: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            filterText: '',
            clickUserId: ''
        };
    },
    computed: {
        defaultProps() {
            return { label: 'nickName' };
        },
        treeHeight() {
            return this.height - 64;
        },
        filterMembers() {
            return this.members.filter(e =>{ return e.nickName.includes(this.filterText); });
        },
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        }
    },
    methods: {
        handleFilterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleShowContextMenu(e, obj, node, vueElem) {
            e.preventDefault();
            const position = {
                x: e.clientX,
                y: e.clientY
            };

            if (this.userId == this.room.creatorId) {
                this.clickUserId = `${obj.id || ''}`;
                this.$store.dispatch('menuOperation/setPopMenu', { position, menu: DeviceMenu.JointRoom });
            }
        }
    }
};
</script>

<style scoped lang="scss">
	.member {
		background: #f0f0f0;
		display: flex;
		flex-direction: column;
		border: 1px solid #ccc;

		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			border-bottom: 1px solid #ccc;

			&--title {
                padding:10px 0px;
				font-size: 16px;
				font-weight: bold;
			}

			&--notes {
				font-size: 16px;
                padding:10px 0px;
				display: flex;
				align-items: flex-end;
			}
		}

		&__container {
			flex-grow: 1;
			&--list {
				background: #fff;
				height: auto;
				min-height: calc(100%-200px);
				max-height: calc(100%-200px);
                border-bottom: 1px #ccc solid;

				&::-webkit-scrollbar {
					display: none;
				}
			}
		}
	}
</style>