<template>
  <el-checkbox
    :data-key="dataKey"
    :checked="checked"
    :data-flag="dataFlag"
    v-on="listeners"
    @change="changeCheckbox"
    v-bind="$attrs"
  >
  </el-checkbox>
</template>

<script>
export default {
  props: {
    dataKey: {
      type: [String, Number, Object, Boolean],
      required: false,
      default: () => {
        return undefined;
      },
    },
    checked: {
      type: [Boolean],
      required: false,
      default: () => {
        return false;
      },
    },
    dataFlag: {
      type: [String, Number, Object, Boolean],
      required: false,
      default: () => {
        return undefined;
      },
    },
  },
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  methods: {
    changeCheckbox(checked, $event) {
      const row = $($event.target).parent().parent().data("key");
      this.$emit("changeCheckbox", checked, row, $event);
    },
  },
};
</script>
