Element table 自适应宽度最简单方法

关于Element table 自适应宽度的方法,网上有数值计算、canvas测量、添加af-table-column组件,感觉都挺麻烦的,而且试了有些还不成功

我的方法是:

  1. 给需要自适应的el-table-column增加一个用于设定宽度的变量“latinWidth”,内容用class为“cell-content-latin”的div包裹住


    1
  2. 把刚刚的变量latinWidth加在data中


    2
  3. 为刚刚的class写个style,内容不换行


    3
  4. 加一个watch,监听的是列表数据(我这里是data)的变化,查找当前列中,最长的内容的宽度是多少,加上20(边距,可以自行调整,因为列表默认有padding,不加的话不居中而且有可能显示不完整)赋值给latinWidth


    4

完毕!我觉得简单,可以符合我的需求,但不一定适合所有需求,请适当参考吧

你可能感兴趣的:(Element table 自适应宽度最简单方法)