Table.js
3.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import template from "./Table.html";
import style from "antd/lib/table/style/index.css";
class Table {
useModules = ["esNgAntd"];
props = {
columns: Array,
dSource: Array,
rowSelection: Object,
rowKey: String,
loading: Number,
};
state = {
dataSource: [],
selectedrecordKeys: [],
selectedrecords: [],
isSelectAll: false,
rowKey: this.props.rowKey || "id",
};
template = template;
watch = {
dSource: (newValue) => {
if (newValue !== undefined) {
let dataSource = [];
newValue.forEach((record, index) => {
let row = {};
if (this.props.rowSelection) {
row.checked = false;
row.disabled = false;
}
if (this.props.rowSelection && typeof this.props.rowSelection.getCheckboxProps === "function") {
let extraAttr = this.props.rowSelection.getCheckboxProps(record);
row = Object.assign(row, extraAttr);
}
this.props.columns.forEach((column) => {
row[column.key] = column.render ? column.render(record[column.key], record, index) : record[column.key];
});
// 主键
if (this.props.rowKey !== undefined) {
row[this.state.rowKey] = record[this.state.rowKey];
} else {
row[this.state.rowKey] = index + 1;
}
dataSource[index] = row;
});
this.state.dataSource = dataSource;
}
},
};
constructor() {
esNgAntd.createStyle("ant-table", style);
}
handleSelectAll(event) {
this.state.isSelectAll = event.target.checked;
this.state.selectedrecordKeys = [];
this.state.selectedrecords = [];
this.state.dataSource.map((record, key) => {
if (record.disabled === false) {
record.checked = event.target.checked;
}
if (record.checked) {
this.state.selectedrecordKeys.push(key);
this.state.selectedrecords.push(this.props.dSource[key]);
}
return record;
});
this.props.rowSelection.onChange(this.state.selectedrecordKeys, this.state.selectedrecords);
}
handleSelect(event, index) {
let pos = this.state.selectedrecordKeys.findIndex((value) => value === index);
if (event.target.checked && pos === -1) {
this.state.selectedrecordKeys.push(index);
this.state.selectedrecords.push(this.props.dSource[index]);
} else {
this.state.selectedrecordKeys.splice(pos, 1);
this.state.selectedrecords.splice(pos, 1);
}
if (this.state.selectedrecordKeys.length === 0) {
this.state.isSelectAll = false;
}
this.props.rowSelection.onChange(this.state.selectedrecordKeys, this.state.selectedrecords);
}
}