pco/app/uni_modules/uni-table/components/uni-tr/table-checkbox.vue

<template>
  <view class="uni-table-checkbox" @click="selected">
    <view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
      <view class="checkbox__inner-icon"></view>
    </view>
    <view v-else class="checkbox__inner checkbox--indeterminate">
      <view class="checkbox__inner-icon"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TableCheckbox',
  emits: ['checkboxSelected'],
  props: {
    indeterminate: {
      type: Boolean,
      default: false
    },
    checked: {
      type: [Boolean, String],
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: -1
    },
    cellData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    checked(newVal) {
      if (typeof this.checked === 'boolean') {
        this.isChecked = newVal
      } else {
        this.isChecked = true
      }
    },
    indeterminate(newVal) {
      this.isIndeterminate = newVal
    }
  },
  data() {
    return {
      isChecked: false,
      isDisabled: false,
      isIndeterminate: false
    }
  },
  created() {
    if (typeof this.checked === 'boolean') {
      this.isChecked = this.checked
    }
    this.isDisabled = this.disabled
  },
  methods: {
    selected() {
      if (this.isDisabled) return
      this.isIndeterminate = false
      this.isChecked = !this.isChecked
      this.$emit('checkboxSelected', {
        checked: this.isChecked,
        data: this.cellData
      })
    }
  }
}
</script>

<style lang="scss">
$checked-color: #007aff;
$border-color: #DCDFE6;
$disable: 0.4;

.uni-table-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 5px 0;
  cursor: pointer;

  // 多选样式
  .checkbox__inner {
    /* #ifndef APP-NVUE */
    flex-shrink: 0;
    box-sizing: border-box;
    /* #endif */
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid $border-color;
    border-radius: 2px;
    background-color: #fff;
    z-index: 1;

    .checkbox__inner-icon {
      position: absolute;
      /* #ifdef APP-NVUE */
      top: 2px;
      /* #endif */
      /* #ifndef APP-NVUE */
      top: 2px;
      /* #endif */
      left: 5px;
      height: 7px;
      width: 3px;
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      opacity: 0;
      transform-origin: center;
      transform: rotate(45deg);
      box-sizing: content-box;
    }

    &.checkbox--indeterminate {
      border-color: $checked-color;
      background-color: $checked-color;

      .checkbox__inner-icon {
        position: absolute;
        opacity: 1;
        transform: rotate(0deg);
        height: 2px;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0px;
        right: 0px;
        bottom: 0;
        width: auto;
        border: none;
        border-radius: 2px;
        transform: scale(0.5);
        background-color: #fff;
      }
    }

    &:hover {
      border-color: $checked-color;
    }

    // 禁用
    &.is-disable {
      /* #ifdef H5 */
      cursor: not-allowed;
      /* #endif */
      background-color: #F2F6FC;
      border-color: $border-color;
    }

    // 选中
    &.is-checked {
      border-color: $checked-color;
      background-color: $checked-color;

      .checkbox__inner-icon {
        opacity: 1;
        transform: rotate(45deg);
      }

      // 选中禁用
      &.is-disable {
        opacity: $disable;
      }
    }

  }
}
</style>