el-table中动态加载数据表头错位问题

el-table中动态加载数据表头错位问题

问题分析

1.控制台进行元素查看是由于表格中数据撑开导致table-body中的td过宽
                  2.可以看到首行的名称是有换行的效果，标识码没有换行，应该可以确定是标识码的
                    数据问题

方案测试

方案尝试1：.给行固定宽度让标识码能完全显示出来

const columnData = ref<any>([
    {
      label: '序号',
      type: 'sort'
    },
    {
      label: '名称',
      prop: 'name'
    },
    {
      label: '标识码',
      prop: 'code',
      width: '240px'
    },])

解决效果：能够达到表头不错位的效果，但是由于一般用于公共组件，你无法确定下一组输入的表头和数据，是否也是这种标识码的情况不可能完全定义所有的列宽，所以排除。

方案尝试2：查找返回的数据类型，看和名称有什么区别

可以看到返回结果code都是sting，但是我查阅资料发现code在表格中被定义为单词，所以需要进行样式调整 

.el-table .cell {
  word-break: break-all; /* 允许单词断行 */
}

解决方案及结论

当el-table作为公共组件进行使用是，如果发现由于table-body数据过长导致表头错位的，检查数据是否为单词，需要进行单独的换行设置