超多功能的自定义表格组件

自定义组件

1.样式
冻结窗格操作列、普通表格；

2.特点：

可以在表格内编辑数据，有时间、下拉框可以选择，不允许空的列
表格外有操作项、可以编辑列头、用户自定义保存列头数据
可以操作列头，

3.难点细节，解决过程：

a点击事件为什么失效?—被遮挡
1click方法能否触发（用普通的方法测试）
2debugger
3看看有没有元素遮挡、f12元素：

    <el-card
      :style="{
        opacity: visible ? '1' : '0',
        'pointer-events': visible ? 'auto' : 'none',
      }"
    >

b列头的计算：因为本次的列头，涉及了几个难点，1.保存用户的列头数据，2.可以自定义选择加减列头数量和显示 3.修改猎头名称
总的来说需要比较熟悉api

 comTableHeader() {
      // 判断savedColumns和tableColumns长度是否相等
      // 如果相等，那么就操作tableColumns，不等就操作savedColumns
      // console.log("savedColumns---------------", this.savedColumns);
      // console.log("this.tableColumns---------------", this.tableColumns);
      let header = [];
// !!用户保存配置
      if (
        this.savedColumns.length == this.tableColumns.length ||
        this.savedColumns.length == 0
      ) {
        this.tableColumns.forEach((column) => {
          let findMapping = this.mappingList.find((match) => {
            return match.PropertyType === column.props;
          });
          column.Caption =
            findMapping != null ? findMapping.PropertyName : column.props;
          if (!column.Visible) column.Visible = true;
          header.push(column);
        });
      } else {
        this.savedColumns.forEach((column) => {
          // console.log(column);
          let findMapping = this.mappingList.find((match) => {
            return match.PropertyType === column.props;
          });
          column.Caption =
            findMapping != null ? findMapping.PropertyName : column.props;
          if (!column.Visible) column.Visible = true;
          header.push(column);
        });
      }
      console.log("header111--------------", header);
      
      // !!计算此列头显不显示
      if (this.selectHeader.length != 0) {
        // 重新处理header
        header = this.tableColumns.filter(
          (item) => this.selectHeader.includes(item.props)
          // this.selectHeader.includes(item.props)
          // 注意这个caption
        );
        // !!重新将mappingList的值赋值进header
        header = header.map((column) => {
          let findMapping = this.mappingList.find((match) => {
            return match.PropertyType === column.props;
          });
          column.Caption =
            findMapping != null ? findMapping.PropertyName : column.props;
          return column;
        });
        this.$emit("saveHeader", header);
        this.$nextTick();
      }
      this.currentTableHeader = header;
      console.log("this.currentTableHeader", this.currentTableHeader);
      return header;
    },

c表格样式
如何冻结？

 <el-table-column align="center" label="Operations" fixed="right"  width="120">

大道至简