elementUI遇到的问题记录-存在待解决

一、

组件：el-table

问题：使用动态数据创建多级表头后，刷新页面时，table行会串行，某些列丢失，图片列未显示图片

解决方案：给el-table增加key

<el-table :key="`${Matn.random()}${item.codeId}`">
    <el-table-column v-for="col in colList" :key="col.colId"></el-table-column>
 
</el-table>

 

问题：设置默认展开行未成功

解决方案：组装table数据时，收起得子元素数组不可命名为children

<div style="height: 500px">
    <el-table
      :data="warningList"
      id="table_self"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change="toggleRowExpansion"
      height="100%"
      :indent="0"
    >
      <el-table-column type="expand" prop="childrenData">
        <template slot-scope="props">
          <el-table id="most_child_table_self" :data="props.row.childrenData" :show-header="true" :indent="0">
            <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="text" label="文字" align="center"></el-table-column>
    </el-table>
  </div>

data() {
    return {
      expands: ['111'],
      warningList: [
        {
          adnm: '111',
          text: 'text',
          childrenData: [
            {
              name: '侧视'
            }
          ] // 不可命名为 children:设置默认展开行expand，一直未成功，子数据使用了children
        },
        {
          adnm: '222',
          text: '2222text',
          childrenData: [
            {
              name: '测试'
            }
          ] // 不可命名为 children:设置默认展开行expand，一直未成功，子数据使用了children
        }
      ]
    }
  },
methods: {
    getRowKeys(row) {
      if (row.adnm) {
        return row.adnm
      }
    },
    // 展开、收起table的折叠行
    toggleRowExpansion(row) {
      const index = this.expands.indexOf(row.adnm)
      if (index > -1) {
        if (this.expands.length > 1) {
          this.expands.splice(index, 1)
        } else {
          this.expands = []
        }
      } else {
        this.expands.push(row.adnm)
      }
    }
  }

 

二、

组件：el-tree

问题：当数据过多，数据出现滚动条时，拖拽某元素，拖拽指标线位置出现偏移

解决方案：将高度设置给el-tree父级dom上

<div class="complex-content">
     <el-tree></el-tree>
</div>

.complex-content {
    height: calc(100% - 144px);
    overflow-y: auto;
    .el-tree {
      margin-top: 8px;
    }
}

三、(待解决~)

组件：el-table

问题一：当表头设置了多级分组，并将其中几列进行固定，最上层的分组名称会显示不全

解决方案：element-ui实现固定列是生成俩套el-header、el-body，然后将设置固定列的table样式从根节点上设置width,并使用overflow:hidden,进行其余内容隐藏

固定列的修改样式

/deep/.el-table__header-wrapper {
  thead th.el-table__cell .cell {
    visibility: visible !important;
  }
}
/deep/.el-table__body-wrapper {
  tbody td.el-table__cell .cell {
    visibility: visible;
  }
}

问题二、固定列的表格线和未固定列的表格线(文字内容)未对齐

解决方案：

四、(待解决~)

组件：element-plus 

问题：版本在beta之后，不支持设置多级表头后固定列效果