lp-table-layout

Install

npm install lp-table-layout

API

| Name | Type | Required | Default | Comments | | ----------- | ------------- | -------- | ------- | -------------------------------------------- | | className | String | false | "" | | | colums | Array | false | [] | 布局列属性 | | data | Array | false | [] | 布局数据属性。填入的对象 name 供列属性读取。 | | lineHeight | String | false | "40px" | 行高 | | outBorder | Bool | false | false | 是否显示外边框 | | innerBorder | Bool | false | false | 是否显示内边框 | | showHeader | Bool | false | true | 是否显示列头 | | rowHover | Bool | false | false | 行是否支持鼠标 hover |

IColum

| Name | Type | Required | Default | Comments | | ------------ | -------------------------------- | -------- | ------- | ----------------------------------------------- | | text | String | true | | 列显示的名字 | | name | String | true | | 用于取 data 中对应的 name | | size | String | false | "100px" | 列的宽度，支持 css 单位 | | align | Enum {"left", "right", "center"} | false | "left" | 水平对齐 | | vAlign | Enum {"top", "bottom", "center"} | false | "top" | 垂直对齐 | | showBg | Bool | false | false | 当前整列是否显示灰色背景 | | rowBold | Bool | false | false | 当前列的单元格文字是否加粗 | | renderHeader | Func (text, colum) | false | | 定制渲染列头。设置些属性后, text 设置无效。 | | renderData | Func (cellData, rowData) | false | | 定制单元格的渲染。设置此属性后，name 设置无效。 |

Development

npm install
npm start

Demo

<TableLayout
  outBorder={true}
  innerBorder={true}
  showHeader={false}
  rowHover={true}
  colums={[
    {
      name: "name",
      size: "180px",
      align: "right",
      showBg: true,
      rowBold: true
    },
    {
      name: "desc",
      size: "calc(100% - 180px)"
    }
  ]}
  data={[
    {
      name: "银行名称",
      desc: "招商银行杭州 XX 支行"
    },
    {
      name: "银行地址",
      desc: "银行地址 1"
    },
    {
      name: "账户名称",
      desc: "XXXX (中国) 有限公司"
    },
    {
      name: "公司地址",
      desc: "公司地址 1"
    }
  ]}
/>;

<TableLayout
  outBorder={true}
  showHeader={true}
  colums={[
    {
      text: "评估纬度",
      name: "name",
      size: "180px",
      vAlign: "center",
      rowBold: true
    },
    {
      text: "评估标准",
      name: "desc",
      size: "calc(100% - 180px)",
      renderData: (cellData, rowData) => {
        return (
          <div>
            {Array.isArray(cellData)
              ? cellData.map((i, k) => (
                  <div style={{ lineHeight: "28px" }} key={k}>
                    {i}
                  </div>
                ))
              : cellData}
          </div>
        );
      }
    }
  ]}
  data={[
    {
      name: "战役进度",
      desc: [
        "5 可以实现 XXX，保证 XXX，无 XXX 风险。",
        "3 可以按照规定时间完成 XXX。",
        "1 可以按照规定时间完成 XXX。"
      ]
    },
    {
      name: "战役结果",
      desc: [
        "5 拿到 XXX 的结果，对 XXX 目标有 XXX 贡献",
        "3 拿到 XXX 的结果，对 XXX 目标有 XXX 贡献"
      ]
    }
  ]}
/>;