ant-design-vue/components/table/SelectionBox.tsx
2020-11-07 15:37:17 +08:00

74 lines
1.7 KiB
Vue

import { defineComponent } from 'vue';
import Checkbox from '../checkbox';
import Radio from '../radio';
import { SelectionBoxProps } from './interface';
import BaseMixin from '../_util/BaseMixin';
import { getOptionProps } from '../_util/props-util';
export default defineComponent({
name: 'SelectionBox',
mixins: [BaseMixin],
inheritAttrs: false,
props: SelectionBoxProps,
setup() {
return {
unsubscribe: null,
};
},
data() {
return {
checked: false,
};
},
created() {
this.checked = this.getCheckState(this.$props);
},
mounted() {
this.subscribe();
},
beforeUnmount() {
if (this.unsubscribe) {
this.unsubscribe();
}
},
methods: {
getCheckState(props): boolean {
const { store, defaultSelection, rowIndex } = props;
let checked = false;
if (store.getState().selectionDirty) {
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
} else {
checked =
store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
defaultSelection.indexOf(rowIndex) >= 0;
}
return checked;
},
subscribe() {
const { store } = this;
this.unsubscribe = store.subscribe(() => {
const checked = this.getCheckState(this.$props);
this.setState({ checked });
});
},
},
render() {
const { type, rowIndex, ...rest } = { ...getOptionProps(this), ...this.$attrs } as any;
const { checked } = this;
const checkboxProps = {
checked,
...rest,
};
if (type === 'radio') {
checkboxProps.value = rowIndex;
return <Radio {...checkboxProps} />;
}
return <Checkbox {...checkboxProps} />;
},
});