2021SC@SDUSC amis-低代码前端框架代码分析十三

代码分析

table view.js
用于表格类型的展现效果，界面可定制化能力更强
可指定表格的行列数及宽高，颜色，部分行列可合并，用户可自行定制

class TableView extends react_1.default.Component {
      constructor(props) {
          super(props);
      }
      renderTd(td, colIndex, rowIndex) {
          const { border, borderColor, render, style } = this.props;
          const key = `td-${colIndex}`;
          let styleBorder;
          if (border) {
              styleBorder = `1px solid ${borderColor}`;
          }
          return (react_1.default.createElement("td", { style: Object.assign({ border: styleBorder, color: td.color, fontWeight: td.bold ? 'bold' : 'normal', background: td.background, padding: td.padding || defaultPadding, width: td.width || 'auto', textAlign: td.align || 'left', verticalAlign: td.valign || 'center' }, style), align: td.align, valign: td.valign, rowSpan: td.rowspan, colSpan: td.colspan, key: key }, this.renderTdBody(td.body)));
      }
      renderTdBody(body) {
          const { render } = this.props;
          return render('td', body || '');
      }
      renderTds(tds, rowIndex) {
          return tds.map((td, colIndex) => this.renderTd(td, colIndex, rowIndex));
      }
      renderTr(tr, rowIndex) {
          const key = `tr-${rowIndex}`;
          return (react_1.default.createElement("tr", { style: Object.assign({ height: tr.height, background: tr.background }, tr.style), key: key }, this.renderTds(tr.tds || [], rowIndex)));
      }
      renderTrs(trs) {
          const tr = trs.map((tr, rowIndex) => this.renderTr(tr, rowIndex));
          return tr;
      }
      renderCols() {
          const { cols } = this.props;
          if (cols) {
              const colsElement = cols.map(col => {
                  return react_1.default.createElement("col", { span: col.span, style: col.style });
              });
              return react_1.default.createElement("colgroup", null, colsElement);
          }
          return null;
      }
      renderCaption() {
          if (this.props.caption) {
              return (react_1.default.createElement("caption", { style: {
                      captionSide: this.props.captionSide === 'bottom' ? 'bottom' : 'top'
                  } }, this.props.caption));
          }
          return null;
      }
      render() {
          const { width, border, borderColor, trs, classnames: cx, className } = this.props;
          let styleBorder;
          if (border) {
              styleBorder = `1px solid ${borderColor}`;
          }
          return (react_1.default.createElement("table", { className: cx('TableView', className), style: { width: width, border: styleBorder, borderCollapse: 'collapse' } },
              this.renderCaption(),
              this.renderCols(),
              react_1.default.createElement("tbody", null, this.renderTrs(trs))));
      }
  }

总结

可定制化使tableview可控性更强了，可按照用户喜好自行设定，有利于用户开发前端。