ts封装table组件

表格展示的数据

 const data = [
  {label:'封装表格好',active:'好好fff',name: 'X6sss', star: 297,type:11 ,field:'assss',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'Gssss', star: 506,type:12,field:'acffff',tabel:'niao' },
  {label:'封装表格好',active:'好好fff',name: 'AVAsss', star: 805 ,type:13,field:'affffff',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'ww', star: 1478,type:14 ,field:'afffff',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'L7ssss', star: 2029 ,type:15,field:'afffff',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'G6ssss', star: 7100 ,type:16,field:'afffff',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'F2ssss', star: 7346 ,type:17,field:'affff',tabel:'niao'},
  {label:'封装表格好',active:'好好fff',name: 'G2sss', star: 10178 ,type:18,field:'affff',tabel:'niao'},
];

具体实现代码

const textStyle = `
    padding:2px 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
`;

// 表头
export function getHead(offsetHeight: number, offsetWidth: number, data: any): string {
  let th = '';
  const thStyle = `
    width:80px;
    background:rgba(247,248,249,1);
    ${textStyle}
  `;

  for (const field in data[0]) {
    th += `<th style="${thStyle}">${field}</th>`;
  }

  return `<tr>${th}</tr>`;
}

// 表身
export function getBody(offsetHeight: number, offsetWidth: number, data: any): string {
  let tr = '';
  /**
   * border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
   */
  const tdStyle = `
    width:80px;
    color: #333;
    font-size: 14px;
    line-height: 30px;
    box-sizing: border-box;
    white-space: nowrap;
    background: #fff;
    text-aligen:center;
    ${textStyle}
  `;

  for (let i = 0; i < data.length; ++i) {
    let td = '';
    const d = data[i];
    const trStyle = i % 2 === 0 ? `background: #fff;` : `background: #f7f8f9;`;

    for (const field in d) {
      td += `<td style="${tdStyle}${trStyle}" title="${d[field]}">${d[field]}</td>`;
    }

    tr += `<tr style="${trStyle}">${td}<tr/>`;
  }
  return tr;
}

// 表格
export function getTable(container: HTMLElement, data: any): HTMLElement {
//container呈表格的容器 data表格展示的数据
  const { offsetHeight, offsetWidth } = container;
  const table = document.createElement('div');
  const head = getHead(offsetHeight, offsetWidth, data);
  const body = getBody(offsetHeight, offsetWidth, data);

  table.innerHTML = ` 
      <table style="width:100%;cellpadding="0"; cellspacing="0";border-collapse: collapse;border-spacing:0;table-layout: fixed;">
        ${head}${body}
      </table>
    `;

  table.setAttribute(
    'style',
    `
     width:100%;
     height:${offsetHeight}px;
     position: relative;
     overflow:overlay;
    `
  );
  return table;
}