给table组件(有固定列的时候)固定表头的功能实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了给table组件(有固定列的时候)固定表头的功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，增加height属性

在props中添加height属性，保证在父组件中可以传值。如果父组件不传值，那么就是undefined

props: [
   .....
    "height",
  ],

2，修改样式

最主要的是thead和tbody的样式，其中都是根据height去动态控制thead和tbody的样式，注意下面三个类所在的位置以及对应的样式。

cvn-table-head-row
cvn-table-body-row
cvn-table-body-row-left

function table(cols, fixed) {
      if (fixed === "right") mark = "right";
      return createElement(
        "table",
        {
          class: {
            "cvn-table-inner": true,
            "cvn-table-simple": vm.theme === "simple",
            "cvn-table-main": fixed === undefined,
            "cvn-table-fixed-left": fixed === "left",
            "cvn-table-fixed-right": fixed === "right",
            "cvn-table-oneline": vm.validOneline,
          },
          attrs: {
            "cvn-table-id": vm.tableID,
            name:
              fixed === "left"
                ? "cvn-table-fixed-left"
                : fixed === "right"
                ? "cvn-table-fixed-right"
                : "cvn-table-main",
          },
        },
        [
          createElement(
            "thead",
            {
              class: {
                "cvn-table-row-container": true,
                "cvn-table-head-row": vm.height,
              },
            },
            [parseHeader(cols)]
          ),
          createElement(
            "tbody",
            {
              class: {
                "cvn-table-row-container": true,
                "cvn-table-body-row": vm.height,
                "cvn-table-body-row-left":
                  fixed === "left" || (mark === "right" && fixed !== "right"),
              },
              attrs: {
                name: "cvn-table-body",
              },
              ref: `tableBodyRef${vm.tableID}`,
              on: {
                scroll: () => {
                  vm.throttlenScrollYWatch && vm.throttlenScrollYWatch();
                },
              },
            },
            vm.validData.length === 0
              ? [parseEmptyRow(cols.length, fixed === undefined ? true : false)]
              : expandCol
              ? parseRowPairs(
                  cols,
                  fixed === undefined ? expandCol : null,
                  vm.validData
                )
              : vm.validData.map((rowData, index) =>
                  parseRow(cols, rowData, index)
                )
          ),
        ]
      );
    }

3，js相关逻辑（如果具有固定列的情况下）

在2中的tbody中，绑定了一个滚动事件，就是在body滚动的时候触发的事件。

在触发事件中，主要是让固定列和其他列保持一个滚动的一致性。

做法：通过nameItem值去获取所有列的body标签，进行同步的scrollTop一致即可。文章来源地址https://www.toymoban.com/news/detail-653299.html

function scrollYWathEffect($$el) {
  let elFixedLeftBody =
    $$el.children.namedItem("cvn-table-fixed-left") &&
    $$el.children
      .namedItem("cvn-table-fixed-left")
      .children.namedItem("cvn-table-body");
  let elFixedRightBody =
    $$el.children.namedItem("cvn-table-fixed-right") &&
    $$el.children
      .namedItem("cvn-table-fixed-right")
      .children.namedItem("cvn-table-body");
  let elMainBody = $$el.children
    .namedItem("cvn-table-view")
    .children.namedItem("cvn-table-main")
    .children.namedItem("cvn-table-body");
  if (elFixedRightBody) {
    let elFixedRightBodyScroll = elFixedRightBody.scrollTop;
    if (elMainBody) elMainBody.scrollTop = elFixedRightBodyScroll;
    if (elFixedLeftBody) elFixedLeftBody.scrollTop = elFixedRightBodyScroll;
  } else if (elFixedLeftBody) {
    let elMainBodyScroll = elMainBody.scrollTop;
    elFixedLeftBody.scrollTop = elMainBodyScroll;
  }
}