rt-sim-training-client/src/views/jointTraining/menuDraft/chooseRole.vue

<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="show"
    width="400px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-input v-model="filterText" placeholder="输入名称进行过滤" clearable />
    <ul v-if="filterList.length" class="listBox">
      <li v-for="item in filterList" :key="item" class="listLi">
        <el-radio v-model="selected" :label="item"><span>{{ item.name }}</span></el-radio>
      </li>
    </ul>
    <span v-else class="tipLable"> {{ $t('global.temporarilyNoData') }} </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="commit">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
    name: 'CmdNotice',
    data() {
        return {
            dialogShow: false,
            title: '',
            props: {
                label: 'name'
            },
            sourceList: [],
            filterText: '',
            selected: '',
            loading: false
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        filterList() {
            return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
        }
    },
    methods: {
        doShow(obj) {
            this.dialogShow = true;
            this.title = obj.title;
            this.sourceList = obj.list;
            this.selected = '';
        },
        doClose() {
            this.dialogShow = false;
        },
        commit() {
            this.$emit('setDriver', this.selected);
            this.doClose();
        }
    }
};

</script>

<style scoped lang="scss">
    /deep/ {
        .el-dialog__body {
            padding: 0px 20px;
        }
    }

    .listBox {
        margin: 0px;
        max-height: 270px;
        overflow-y: auto;
        padding-inline-start: 0px;
        width: 100%;

        .listLi {
            list-style: none;
            height: 30px;
            line-height: 30px;
        }
    }

    .tipLable {
        line-height: 33px;
    }
</style>