通过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>

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较常见的需求,可以通过 Ant Design of Vue 的 Select 组件Table 组件来实现。 首先,在 Vue 的 template 中,你需要引入 Ant Design of Vue 的 Select 和 Table 组件,并定义一个 data 对象,用于存储下拉框选中的值和表格数据。 ```html <template> <div> <a-select v-model="selectedValue" style="width: 200px;"> <a-select-option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</a-select-option> </a-select> <a-table :columns="columns" :data-source="tableData"></a-table> </div> </template> <script> export default { data() { return { selectedValue: '', options: [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' } ], columns: [ { title: '列1', dataIndex: 'column1' }, { title: '列2', dataIndex: 'column2' }, { title: '列3', dataIndex: 'column3' } ], tableData: [] } } } </script> ``` 在上面的代码中,我们定义了一个下拉框 Select,它的选项通过 options 数组来定义。当用户选中某个选项时,selectedValue 变量会存储选项的值。 接着我们定义了一个 Table,它的列通过 columns 数组来定义,数据通过 tableData 数组来存储。 接下来,我们需要在 Vue 的 methods 中定义一个方法,当用户选中下拉框的选项时,会调用这个方法,根据选中的选项来更新表格数据。 ```html <template> <div> <a-select v-model="selectedValue" style="width: 200px;" @change="handleSelectChange"> <a-select-option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</a-select-option> </a-select> <a-table :columns="columns" :data-source="tableData"></a-table> </div> </template> <script> export default { data() { return { selectedValue: '', options: [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' } ], columns: [ { title: '列1', dataIndex: 'column1' }, { title: '列2', dataIndex: 'column2' }, { title: '列3', dataIndex: 'column3' } ], tableData: [] } }, methods: { handleSelectChange() { // 根据 selectedValue 来设置表格数据 switch (this.selectedValue) { case 'option1': this.tableData = [ { column1: '行1列1', column2: '行1列2', column3: '行1列3' }, { column1: '行2列1', column2: '行2列2', column3: '行2列3' }, { column1: '行3列1', column2: '行3列2', column3: '行3列3' } ] break case 'option2': this.tableData = [ { column1: '行4列1', column2: '行4列2', column3: '行4列3' }, { column1: '行5列1', column2: '行5列2', column3: '行5列3' }, { column1: '行6列1', column2: '行6列2', column3: '行6列3' } ] break case 'option3': this.tableData = [ { column1: '行7列1', column2: '行7列2', column3: '行7列3' }, { column1: '行8列1', column2: '行8列2', column3: '行8列3' } ] break default: this.tableData = [] } } } } </script> ``` 在上面的代码中,我们定义了一个 handleSelectChange 方法,当用户选中下拉框的选项时,会调用这个方法。根据选中的选项,我们通过 switch 语句来设置表格数据。最后,我们将表格数据赋值给 tableData 变量,表格就会自动更新数据。 这样,我们就完成了一个利用 Ant Design of Vue 设计布局,通过下拉框操作表格的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值