feat: 增加columnKey属性,column[columnKey]可作为主键

This commit is contained in:
yangchch6 2020-03-22 16:47:08 +08:00
parent 87be595ae5
commit da2414b196
5 changed files with 23 additions and 1 deletions

View File

@ -84,6 +84,8 @@ var propTypes = {
//特殊的渲染规则的key值 //特殊的渲染规则的key值
rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]), rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]),
rowClassName: _propTypes2["default"].func, rowClassName: _propTypes2["default"].func,
//column的主键和 column.key 作用相同
columnKey: _propTypes2["default"].string,
expandedRowClassName: _propTypes2["default"].func, expandedRowClassName: _propTypes2["default"].func,
childrenColumnName: _propTypes2["default"].string, childrenColumnName: _propTypes2["default"].string,
onExpand: _propTypes2["default"].func, onExpand: _propTypes2["default"].func,
@ -127,6 +129,7 @@ var defaultProps = {
expandIconAsCell: false, expandIconAsCell: false,
defaultExpandAllRows: false, defaultExpandAllRows: false,
defaultExpandedRowKeys: [], defaultExpandedRowKeys: [],
columnKey: 'key',
rowKey: 'key', rowKey: 'key',
rowClassName: function rowClassName() { rowClassName: function rowClassName() {
return ''; return '';
@ -672,6 +675,7 @@ var Table = function (_Component) {
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var rows = arguments[2]; var rows = arguments[2];
var columnKey = this.props.columnKey;
var _state = this.state, var _state = this.state,
_state$contentWidthDi = _state.contentWidthDiff, _state$contentWidthDi = _state.contentWidthDiff,
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi, contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
@ -683,6 +687,9 @@ var Table = function (_Component) {
rows[currentRow] = rows[currentRow] || []; rows[currentRow] = rows[currentRow] || [];
columns.forEach(function (column, i) { columns.forEach(function (column, i) {
if (!column.key) {
column.key = column[columnKey];
}
if (column.rowSpan && rows.length < column.rowSpan) { if (column.rowSpan && rows.length < column.rowSpan) {
while (rows.length < column.rowSpan) { while (rows.length < column.rowSpan) {
rows.push([]); rows.push([]);

7
dist/demo.js vendored
View File

@ -37121,6 +37121,8 @@
//特殊的渲染规则的key值 //特殊的渲染规则的key值
rowKey: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]), rowKey: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
rowClassName: _propTypes2['default'].func, rowClassName: _propTypes2['default'].func,
//column的主键和 column.key 作用相同
columnKey: _propTypes2['default'].string,
expandedRowClassName: _propTypes2['default'].func, expandedRowClassName: _propTypes2['default'].func,
childrenColumnName: _propTypes2['default'].string, childrenColumnName: _propTypes2['default'].string,
onExpand: _propTypes2['default'].func, onExpand: _propTypes2['default'].func,
@ -37164,6 +37166,7 @@
expandIconAsCell: false, expandIconAsCell: false,
defaultExpandAllRows: false, defaultExpandAllRows: false,
defaultExpandedRowKeys: [], defaultExpandedRowKeys: [],
columnKey: 'key',
rowKey: 'key', rowKey: 'key',
rowClassName: function rowClassName() { rowClassName: function rowClassName() {
return ''; return '';
@ -37709,6 +37712,7 @@
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var rows = arguments[2]; var rows = arguments[2];
var columnKey = this.props.columnKey;
var _state = this.state, var _state = this.state,
_state$contentWidthDi = _state.contentWidthDiff, _state$contentWidthDi = _state.contentWidthDiff,
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi, contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
@ -37720,6 +37724,9 @@
rows[currentRow] = rows[currentRow] || []; rows[currentRow] = rows[currentRow] || [];
columns.forEach(function (column, i) { columns.forEach(function (column, i) {
if (!column.key) {
column.key = column[columnKey];
}
if (column.rowSpan && rows.length < column.rowSpan) { if (column.rowSpan && rows.length < column.rowSpan) {
while (rows.length < column.rowSpan) { while (rows.length < column.rowSpan) {
rows.push([]); rows.push([]);

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -38,6 +38,7 @@ import 'bee-table/build/Table.css';
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- | | :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
| data | 传入的表格数据key值必需否则会导致部分功能出现问题。建议使用唯一的值如id | array | [] | | data | 传入的表格数据key值必需否则会导致部分功能出现问题。建议使用唯一的值如id | array | [] |
| columns | 列的配置表,具体配置见下表 | array | - | | columns | 列的配置表,具体配置见下表 | array | - |
| columnKey | 如果columnKey是字符串`column [columnKey]`将被作为主键。 | string | 'key' |
| bordered | 是否展示外边框和列边框 | boolean | false | | bordered | 是否展示外边框和列边框 | boolean | false |
| defaultExpandAllRows | 默认是否展开所有行 | bool | false | | defaultExpandAllRows | 默认是否展开所有行 | bool | false |
| defaultExpandedRowKeys | 初始扩展行键 | array | [] | | defaultExpandedRowKeys | 初始扩展行键 | array | [] |

View File

@ -28,6 +28,8 @@ const propTypes = {
//特殊的渲染规则的key值 //特殊的渲染规则的key值
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowClassName: PropTypes.func, rowClassName: PropTypes.func,
//column的主键和 column.key 作用相同
columnKey: PropTypes.string,
expandedRowClassName: PropTypes.func, expandedRowClassName: PropTypes.func,
childrenColumnName: PropTypes.string, childrenColumnName: PropTypes.string,
onExpand: PropTypes.func, onExpand: PropTypes.func,
@ -71,6 +73,7 @@ const defaultProps = {
expandIconAsCell: false, expandIconAsCell: false,
defaultExpandAllRows: false, defaultExpandAllRows: false,
defaultExpandedRowKeys: [], defaultExpandedRowKeys: [],
columnKey: 'key',
rowKey: 'key', rowKey: 'key',
rowClassName: () => '', rowClassName: () => '',
expandedRowClassName: () => '', expandedRowClassName: () => '',
@ -483,12 +486,16 @@ class Table extends Component {
} }
getHeaderRows(columns, currentRow = 0, rows) { getHeaderRows(columns, currentRow = 0, rows) {
const { columnKey } = this.props;
let { contentWidthDiff = 0, lastShowIndex = -1 } = this.state; let { contentWidthDiff = 0, lastShowIndex = -1 } = this.state;
let filterCol = []; let filterCol = [];
rows = rows || []; rows = rows || [];
rows[currentRow] = rows[currentRow] || []; rows[currentRow] = rows[currentRow] || [];
columns.forEach((column,i) => { columns.forEach((column,i) => {
if (!column.key) {
column.key = column[columnKey];
}
if (column.rowSpan && rows.length < column.rowSpan) { if (column.rowSpan && rows.length < column.rowSpan) {
while (rows.length < column.rowSpan) { while (rows.length < column.rowSpan) {
rows.push([]); rows.push([]);