aiot-app/pages/warehouse/inventory/components/listOption_line.vue

<template>
  <view class="list-wrap">
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      :class="isActive(item)"
      @click="change(item)"
    >
      {{ item[label] }}
    </view>
  </view>
</template>

<script>
export default {
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    active: {
      type: [Number, String]
    },
    label: {
      type: String,
      default: 'label'
    },
    value: {
      type: String,
      default () {
        return 'value'
      }
    }
  },
  methods: {
    isActive (item) {
      if (this.active === item[this.value]) {
        return 'active'
      } else {
        return ''
      }
    },
    change (item) {
      this.$emit('change', item[this.value])
    }
  }
}
</script>

<style lang="scss" scoped>
.list-wrap {
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    box-sizing: border-box;
    height: 100rpx;
    padding-left: 30rpx;
    border-bottom: 1px solid #f2f2f2;
  }

  & .active {
    background-color: #caf982;
  }
}
</style>