ant-design-vue/components/table/createBodyRow.jsx

60 lines
1.3 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import PropTypes from '../_util/vue-types';
2018-03-29 14:08:04 +00:00
2019-01-12 03:33:27 +00:00
import { Store } from './createStore';
2018-03-29 14:08:04 +00:00
const BodyRowProps = {
store: Store,
2019-01-12 03:33:27 +00:00
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
2018-03-29 14:08:04 +00:00
prefixCls: PropTypes.string,
2019-01-12 03:33:27 +00:00
};
2018-03-29 14:08:04 +00:00
2019-01-12 03:33:27 +00:00
export default function createTableRow(Component = 'tr') {
2018-03-29 14:08:04 +00:00
const BodyRow = {
name: 'BodyRow',
props: BodyRowProps,
2019-01-12 03:33:27 +00:00
data() {
const { selectedRowKeys } = this.store.getState();
2018-03-29 14:08:04 +00:00
return {
selected: selectedRowKeys.indexOf(this.rowKey) >= 0,
2019-01-12 03:33:27 +00:00
};
2018-03-29 14:08:04 +00:00
},
2019-01-12 03:33:27 +00:00
mounted() {
this.subscribe();
2018-03-29 14:08:04 +00:00
},
2019-01-12 03:33:27 +00:00
beforeDestroy() {
2018-03-29 14:08:04 +00:00
if (this.unsubscribe) {
2019-01-12 03:33:27 +00:00
this.unsubscribe();
2018-03-29 14:08:04 +00:00
}
},
methods: {
2019-01-12 03:33:27 +00:00
subscribe() {
const { store, rowKey } = this;
2018-03-29 14:08:04 +00:00
this.unsubscribe = store.subscribe(() => {
2019-01-12 03:33:27 +00:00
const { selectedRowKeys } = this.store.getState();
const selected = selectedRowKeys.indexOf(rowKey) >= 0;
2018-03-29 14:08:04 +00:00
if (selected !== this.selected) {
2019-01-12 03:33:27 +00:00
this.selected = selected;
2018-03-29 14:08:04 +00:00
}
2019-01-12 03:33:27 +00:00
});
2018-03-29 14:08:04 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
2018-03-29 14:08:04 +00:00
const className = {
2018-03-31 13:11:02 +00:00
[`${this.prefixCls}-row-selected`]: this.selected,
2019-01-12 03:33:27 +00:00
};
2018-03-29 14:08:04 +00:00
return (
2018-05-10 11:15:43 +00:00
<Component class={className} {...{ on: this.$listeners }}>
2018-03-29 14:08:04 +00:00
{this.$slots.default}
</Component>
2019-01-12 03:33:27 +00:00
);
2018-03-29 14:08:04 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-03-29 14:08:04 +00:00
2019-01-12 03:33:27 +00:00
return BodyRow;
2018-03-29 14:08:04 +00:00
}