通过Ant Design of Vue输入框和表格组件组装封装下拉框组件

完整代码

​
<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>