option-group.vue

<style lang="less" scoped>
.option-group {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: .75rem;

  .option-group-data {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .option {
    width: 100%;
    float: left;
    min-height: 30px;
  }

  .option-title {
    width: calc(~'100% - 24px');
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .option-title-span {
    width: calc(~'100% - 5px');
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .option-checkbox {
    float: left;
    width: 20px;
    margin-right: 4px;
  }
}
</style>
<template>
  <div class="option-group">
    <div
      v-if="hasData"
      class="option-group-data"
    >
      <div
        class="option"
        v-for="(item, index) in data"
        :key="item.code"
      >
        <div class="option-checkbox">
          <Checkbox
            :value="item._checked"
            @on-change="selectCancel(item)"
          />
        </div>
        <div class="option-title">
          <Tooltip :content="showTitle(item, index)">
            <span class="option-title-span">{{showTitle(item, index)}}</span>
          </Tooltip>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
    <div
      class="no-data"
      v-else
    >
      {{"暂无数据"}}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    hasData: {
      get: function () {
        return this.data && this.data.length > 0
      },
    },
  },
  methods: {
    showTitle(item, index) {
      return item.name + '(' + item.code + ')'
    },
    selectCancel(item) {
      this.$emit('on-change', item)
    },
  },
}
</script>