iView表单的label宽度怎么不生效？

这问题太常见了，iView的表单label宽度确实有点坑。根本原因是它的Form组件会在JS里面动态计算label宽度，你光写CSS是干不过它的。

两种解决方式：

第一种是在Form组件上设置label-width属性，这才是正确的打开方式：

第二种是如果你非要走CSS路线，得用更暴力的选择器：

.ivu-form .ivu-form-item-label {

  width: 120px !important;

  flex: 0 0 120px !important;

}

记住iView的FormItem默认是flex布局，所以光改width不够，flex-basis也得一起改。不过还是推荐第一种方案，更符合组件设计。

iView这个坑我也踩过，label-width不生效是因为它被JS动态覆盖了。试试这个方案：

首先确认你的Form组件上设置了label-width属性，比如：

<Form :label-width="150">

  <FormItem label="用户名">

    <Input />

  </FormItem>

</Form>

如果还不行，可能是你的CSS被iView的JS动态计算覆盖了。优化一下方案：
1. 去掉你自定义的!important样式
2. 在全局CSS里加这个：

.ivu-form .ivu-form-item-label {

  width: auto !important;

  min-width: 150px; /* 这里写你需要的宽度 */

}

这招我用了N次，比直接改label-width属性更稳，不会被JS覆盖。iView这破动态计算有时候真挺烦的，特别是升级版本后经常出幺蛾子。