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"> 暂无数据 </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="doClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="commit">确 定</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>