56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-dialog title="选择培训公司" v-model="dialogForm" width="400px">
|
||
|
|
<ul class="company-list">
|
||
|
|
<li :class="{'active': active == item.id}" @click="active = item.id" class="company-item one_text_detail" v-for="item in companyList" :key="item.id">{{ item.name }}</li>
|
||
|
|
</ul>
|
||
|
|
<div class="flex just-center mt10">
|
||
|
|
<el-button type="primary" @click="dialogForm = false">确定</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref ,defineExpose} from 'vue';
|
||
|
|
const dialogForm = ref(false);
|
||
|
|
const companyList = ref([
|
||
|
|
{ id: 1, name: '公司A' },
|
||
|
|
{ id: 2, name: '公司B' },
|
||
|
|
{ id: 3, name: '公司C' },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const active = ref(null)
|
||
|
|
|
||
|
|
const init = (id) => {
|
||
|
|
active.value = id;
|
||
|
|
dialogForm.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
init
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.company-list {
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
max-height: 40vh;
|
||
|
|
overflow: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
.company-item {
|
||
|
|
padding: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
line-height: 20px;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
background: #00bfbf;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|