完整代码
<template>
<div class="multifunctional-box">
<div class="block-chart" @click="handleTableClick">
<a-button
><a-icon :type="showDropdown ? 'caret-down' : 'caret-up'"
/></a-button>
</div>
<a-input
style="width: 200px"
v-model="selectedValue"
placeholder="请您选择内容"
readonly
allow-clear
@keydown="handleInputKeydown"
/>
<div class="table-style" v-if="showDropdown">
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
@rowClick="handleTableRowClick"
>
</a-table>
</div>
</div>
</template>
<script>
const columns = [
{
title: '船舶类型',
dataIndex: 'name',
key: 'name',
ellipsis: true
},
{
title: '英文船名',
dataIndex: 'age',
key: 'age',
ellipsis: true
},
{
title: '中文船名',
dataIndex: 'address',
key: 'address 1',
ellipsis: true
},
{
title: 'IMO代码',
dataIndex: 'address',
key: 'address 2',
ellipsis: true
}
]
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No.'
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No.'
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. '
}
]
export default {
data() {
return {
selectedValue: '',
data,
columns,
showDropdown: false
}
},
methods: {
handleTableRowClick(row) {
this.selectedValue = row.name
this.showDropdown = false
},
handleTableClick() {
this.showDropdown = !this.showDropdown
},
handleInputKeydown(event) {
event.preventDefault()
}
}
}
</script>
<style lang="scss" scoped>
.multifunctional-box {
cursor: pointer;
position: relative;
width: 100px;
}
.table-style {
position: absolute;
left: 0;
width: 600px;
z-index: 9999;
}
.block-chart {
position: absolute;
left: 0;
z-index: 999;
}
::v-deep .ant-btn {
padding: 0 9px;
}
::v-deep .ant-input {
padding-left: 40px;
caret-color: transparent;
cursor: default;
}
</style>
效果图:
也可以封装组件使用完整代码
<template>
<div class="Multifunctional_box">
<div class="block_chart" @click="Click_table">
<a-button><a-icon :type="Showor ? 'caret-down' : 'caret-up'" /></a-button>
</div>
<a-input
:value="selectedValue"
@input="selectedValue = $event.target.value"
placeholder="请您选择内容"
readonly
allow-clear
onkeydown="return false"
/>
<div class="Table_style" v-if="Showor">
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
@rowClick="Singledata"
bordered
>
</a-table>
</div>
</div>
</template>
<script>
const columns = [
{
title: '船舶类型',
dataIndex: 'name',
key: 'name',
ellipsis: true
},
{
title: '英文船名',
dataIndex: 'age',
key: 'age',
ellipsis: true
},
{
title: '中文船名',
dataIndex: 'address',
key: 'address 1',
ellipsis: true
},
{
title: 'IMO代码',
dataIndex: 'address',
key: 'address 2',
ellipsis: true
}
]
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No.'
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No.'
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. '
}
]
export default {
props: {
value: {
type: String,
required: true
},
// columns: {
// type: Array,
// required: true
// }
},
data() {
return {
selectedValue: this.value,
data,
columns,
Showor: false
}
},
watch: {
value(newValue) {
this.selectedValue = newValue //value prop的变化并更新selectedValue
}
},
methods: {
Singledata(row) {
this.selectedValue = row.name
this.Showor = false
this.$emit('input', this.selectedValue) // 发送更新事件到父组件
},
Click_table() {
this.Showor = !this.Showor
}
// Removeclose() {
// this.Showor = false
// }
}
}
</script>
<style lang="scss" scoped>
.Multifunctional_box {
cursor: pointer;
position: relative;
width: 100px;
.Table_style {
position: absolute;
left: 0;
width: 600px;
z-index: 99;
background-color: #fff;
}
.block_chart {
position: absolute;
left: 0;
z-index: 99;
}
}
::v-deep .ant-btn {
padding: 0 9px;
}
::v-deep .ant-input {
padding-left: 40px;
caret-color: transparent;
cursor: default;
}
</style>
父组件使用
<select-module v-model="selectedValue"></select-module>