yd_qycpfb/jp-mobile/components/DoublePicker/DoublePicker.vue

<template>
  <div class="double-picker">
    <div class="picker-column">
      <!-- <label :for="'picker-' + column1Name">{{ column1Label }}：</label> -->
      <select class="custom-select"
        :id="'picker-' + column1Name"
        v-model="selectedColumn1"
        @change="updateColumn2"
      >
   
        <option
          v-for="item in column1Data"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </option>
      </select>
    </div>

    <div class="picker-column">
      <!-- <label :for="'picker-' + column2Name">{{ column2Label }}：</label> -->
      <select class="custom-select"
        :id="'picker-' + column2Name"
        v-model="selectedColumn2"
      >

        <option
          v-for="item in column2Data"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    column1Label: {
      type: String,
      default: "第一列"
    },
    column2Label: {
      type: String,
      default: "第二列"
    },
    column1Data: {
      type: Array,
      required: true
    },
    column2Data: {
      type: Array,
      required: true
    },
    column1Name: {
      type: String,
      default: "column1"
    },
    column2Name: {
      type: String,
      default: "column2"
    }
  },
  data() {
    return {
      selectedColumn1: "",
      selectedColumn2: ""
    };
  },
  methods: {
    updateColumn2() {
      this.$emit("update:column2Data", this.getColumn2Data());
      this.selectedColumn2 = ""; // 清空第二列选择
    },
    getColumn2Data() {
      // 根据第一列的选择返回第二列的数据
      const selectedColumn1 = this.column1Data.find(
        item => item.value === this.selectedColumn1
      );
      return selectedColumn1 ? selectedColumn1.children || [] : [];
    }
  },
  watch: {
    selectedColumn1() {
      this.$emit("input", {
        column1: this.selectedColumn1,
        column2: this.selectedColumn2
      });
    },
    selectedColumn2() {
      this.$emit("input", {
        column1: this.selectedColumn1,
        column2: this.selectedColumn2
      });
    }
  }
};
</script>

<style scoped>
	.select-container {
	  display: flex;
	  width: 200px; /* 可以根据需要调整宽度 */
	}
	
	.custom-select {
	  appearance: none; /* 去掉默认样式 */
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  background-color: transparent; /* 背景透明 */
	  border: none; /* 去掉边框 */
	  outline: none; /* 去掉焦点边框 */
	  padding: 8px 12px; /* 添加内边距 */
	  font-size: 16px; /* 字体大小 */
	  width: 100%; /* 宽度占满容器 */
	  cursor: pointer; /* 鼠标指针样式 */
	  color: #333; /* 字体颜色 */
	}
	
	/* 添加自定义下拉箭头（可选） */
	.select-container::after {
	  content: "▾";
	  position: absolute;
	  right: 10px;
	  top: 50%;
	  transform: translateY(-50%);
	  pointer-events: none; /* 防止箭头影响点击 */
	  color: #999; /* 箭头颜色 */
	}
	
.double-picker {
  display: flex;
  justify-content: space-between;
}

.picker-column {
  flex: 1;
}

label {
  display: block;
  margin-bottom: 5px;
}

select {
  width: 100%;
  padding: 5px;
  font-size: 14px;
}
</style>